通过javascript在网页端解压zip文件并查看压缩包内容

　　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[0];
        window.un = new UnZipArchive( file );
        un.getData( function() {
            //获取所以的文件和文件夹列表;
            var arr = un.getEntries();
            //拼接字符串
            var str = "";
            for(var i=0; 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