WEB前端解压ZIP压缩包

　　web前端解压zip文件有什么用：

　　　　只考虑标准浏览器的话， 服务器只要传输压缩包到客户端， 节约了带宽， 而且节约了传输时间， 听起来好像很厉害的说；

　　     如果前端的代码很多， 而且包含大副的图片，那么就可以把js和css和jpg和png等各种数据通过服务端打包成zip传送到浏览器， 浏览器负责解压， css实用动态生成插入到dom中，js也用globalEval直接执行， jpg或者png各种图片文件由blob流转化为image， 直接插入到浏览器中；

　　html5支持读取Blob(二进制大对象, file文件也是继承了Blob)， 并转化为图片流或者文字流或者其他流格式， 这也是为什么浏览器可以读取"application/zip"文件的原因；

　　要在浏览器中解压zip文件的话需要引入四个js ， 因为UnZipArchive.js依赖了zip.js, mime-type.js和jquery.js , 测试demo如下：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="http://gildas-lormeau.github.io/zip.js/demos/zip.js"></script>

    <script src="http://gildas-lormeau.github.io/zip.js/demos/mime-types.js"></script>

    <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>

    <script src="http://files.cnblogs.com/files/diligenceday/UnZipArchive.js"></script>

</head>

<body>

<h2>

    demo

</h2>

<div>

    <input type="file" id="file">

</div>

<ul id="dir">

</ul>

<script>

    $("#file").change(function (e) {

        var file = this.files[];

        window.un = new UnZipArchive( file );

        un.getData( function() {

            //获取所以的文件和文件夹列表;

            var arr = un.getEntries();

            //拼接字符串

            var str = "";

            for(var i=; i<arr.length; i++ ) {

                //点击li的话直接下载文件;

                str += "<li onclick=download('"+arr[i]+"')>"+arr[i]+"</li>"

            };

            $("#dir").html( str );

        });

    });

    var download = function ( filename ) {

        un.download( filename );

    };

</script>

</body>

</html>

UnzioarichiveJS 是自己封装的， 有任何问题的话反馈至github的issue

https://github.com/sqqihao/nono_framework/issues?q=is%3Aopen+is%3Aissue 

　　解压ZIP压缩包的完整DEMO

　　因为zipJS依赖Worker， 所以要在http协议下才能正常使用， 我把html放在git ：http://sqqihao.github.io/codes/zipjs/zip.html

　　但是浏览器兼容又是大问题；

作者： NONO
出处：http://www.cnblogs.com/diligenceday/

QQ：287101329

通过javascript在网页端解压zip文件并查看压缩包内容的更多相关文章

  1. Android 解压zip文件(支持中文)

    过了n多天后,当再次使用原先博客上写的那篇: Android 压缩解压zip文件 去做zip包的解压的时候,出现了原来没有发现的很多问题.首先是中文汉字问题,使用java的zip包不能很好的解决解压问 ...

  2. （转载）C#压缩解压zip 文件

    转载之: C#压缩解压zip 文件 - 大气象 - 博客园http://www.cnblogs.com/greatverve/archive/2011/12/27/csharp-zip.html C# ...

  3. Android 解压zip文件你知道多少？

    对于Android常用的压缩格式ZIP,你了解多少? Android的有两种解压ZIP的方法,你知道吗? ZipFile和ZipInputStream的解压效率,你对比过吗? 带着以上问题,现在就开始 ...

  4. java实现解压zip文件，(亲测可用)！！！！！！

    项目结构: Util.java内容: package com.cfets.demo; import java.io.File; import java.io.FileOutputStream; imp ...

  5. Android 解压zip文件

    过了n多天后,当再次使用原先博客上写的那篇: Android 压缩解压zip文件 去做zip包的解压的时候,出现了原来没有发现的很多问题.首先是中文汉字问题,使用java的zip包不能很好的解决解压问 ...

  6. python用zipfile模块打包文件或是目录、解压zip文件实例

    #!/usr/bin/env python # -*- coding: utf-8 -*- from zipfile import * import zipfile #解压zip文件 def unzi ...

  7. AIX解压ZIP文件

    AIX系统自身是没有解压ZIP文件的,但在AIX安装oracle数据库服务器的话,在$ORACLE_HOME/bin路径下方却有unzip命令,可以解压ZIP文件. 一.shell脚本   之前的版本 ...

  8. linux 解压zip文件

    linux 解压zip文件 学习了:https://blog.csdn.net/hbcui1984/article/details/1583796 unzip xx.zip

  9. Java 上传解压zip文件，并且解析文件里面的excel和图片

    需求:上传一个zip文件,zip文件里面包含一个excel和很多图片,需要把excel里面的信息解析出来保存到表中,同时图片也转化成base64保存到数据库表中. PS:为了方便不同水平的开发人员阅读 ...

随机推荐

  1. 使用ztree.js，受益一生，十分钟学会使用tree树形结构插件

    看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...

  2. TC(Total Commander)文件管理神器

    TC文件管理神器 Total Commander是一个会显著提高文件操作效率的工具,而文件操作是应用计算机最基本的功夫,也是伴随一生的操作.因此花一点时间学习,而会受益一世. Total Comman ...

  3. Json数据的学习

    JSON 教程 <body><h2>JSON Object Creation in JavaScript</h2> <p>Name: <span ...

  4. 画图解释 SQL join 语句

    转:http://blog.jobbole.com/40443/ 本文由 伯乐在线 - 奇风余谷 翻译.未经许可,禁止转载!英文出处:Jeff Atwood.欢迎加入翻译组. 我认为 Ligaya T ...

  5. 如何用 CSS 做到完全垂直居中

    本文将教你一个很有用的技巧——如何使用 CSS 做到完全的垂直居中.我们都知道 margin:0 auto; 的样式能让元素水平居中,而 margin: auto; 却不能做到垂直居中……直到现在.但 ...

  6. CoffeeScript的类继承的工具函数extends

    __hasProp = {}.hasOwnProperty, __extends = function(child, parent) { // 派生类时,如果基类的类属性值是对象,那么子类的类属性只是 ...

  7. 海王星给你好看！FineUI v4.0公测版发布暨《你找BUG我送书》活动开始（活动已结束！）

    <FineUI v4.0 你找BUG我送书>活动已结束,恭喜如下三位网友获得由 FineUI 作者亲自翻译的图书<jQuery实战 第二版>! 奋斗~ 吉吉﹑ purplebo ...

  8. apache配置虚拟主机

    步骤如下: 1.在配置文件httpd.conf中启用httpd-vhosts.conf 找到# Virtual hosts将Include conf/extra/httpd-vhosts.conf前的 ...

  9. [【codechefCHSEQ22】Chef and Favourite Sequence(并查集）

    题目:http://hzwer.com/3419.html 题意:给你一个全是0的数列,有m种操作[Li,Ri],每次操作就将下标处于[Li,Ri]的元素取反.你可以选若干个操作来使这个数列最后变成别 ...

  10. Myeclipse 2015 stable 2.0 完美破解方法

    2015-08-21  以前写了一篇<Myeclipse 2015 stable 1.0 完美破解方法>,现 在跟新一下Myeclipse 2015 stable 2.0 破解方法,此方法 ...