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 是自己封装的，有任何问题的话请及时反馈
解压ZIP压缩包的完整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> <style>code{ display: block; padding: 10px; background: #eee;} </style></head><body><div> <h1>兼容性 </h1> <div><p> zip.js可以在所有的chrome浏览器和firefox浏览器中运行， 可以在safari6和IE10，以及IE10以上运行;</p><p> 如果要在IE9和safari中运行需要两个设置：</p><code> 1：zip.useWebWorkers == false</code><code> 2：并引用这个JS:https://bitbucket.org/lindenlab/llsd/raw/7d2646cd3f9b/js/typedarray.js</code> </div> <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++ ） { str += "<li onclick=download（""+arr[i]+""）>"+arr[i]+"</li>"};$（"#dir"）.html（ str ）; }）;}）;var download = function （ filename ） { un.download（ filename ）;}; </script></div><script> zip.workerScriptsPath = "http://gildas-lormeau.github.io/zip.js/demos/"; /*** @desc 解压缩文件的类;* @return UnZipArchive 的实例;* */ var UnZipArchive = function（ blob ） {if（ ！blob ） { alert（"参数不正确, 需要一个Blob类型的参数"）; return ;};if（ ！（blob instanceof Blob） ） { alert（"参数不是Blob类型"）; return ;};function noop（） {};this.entries = {};this.zipReader = {};var _this = this;this.length = 0;this.onend = noop;this.onerror = noop;this.onprogress = noop;//创建一个延迟对象;var def = this.defer = new $.Deferred（）;zip.createReader（ new zip.BlobReader（ blob ）, function（zipReader） { _this.zipReader = zipReader; zipReader.getEntries（function（entries） {_this.entries = entries;//继续执行队列;def.resolve（）; }）;}, this.error.bind（_this） ）; }; /*** @desc 把blob文件转化为dataUrl;* */ UnZipArchive.readBlobAsDataURL = function （blob, callback） {var f = new FileReader（）;f.onload = function（e） {callback（ e.target.result ）;};f.readAsDataURL（blob）; }; $.extend（ UnZipArchive.prototype, {/** * @desc 获取压缩文件的所有入口; * @return ArrayList; * */"getEntries" : function（） { var result = []; for（var i= 0, len = this.entries.length ; i<len; i++ ） {result.push（ this.entries[i].filename ）; } return result;},/** * @desc 获取文件Entry; * @return Entry * */"getEntry" : function （ filename ） { var entrie; for（var i= 0, len = this.entries.length ; i<len; i++ ） {if（ this.entries[i].filename === filename） { return this.entries[i];}; }},/** * @desc 下载文件 * @param filename; * @return void; * */"download" : function （ filename , cb , runoninit） { var _this = this; this.defer = this.defer.then（function（） {var def = $.Deferred（）;if（！filename） return ;if（runoninit） { return runoninit（）;};var entry = _this.getEntry（ filename ）;if（！entry）return;entry.getData（new zip.BlobWriter（zip.getMimeType（entry.filename））, function（data） { if（ ！cb ） {UnZipArchive.readBlobAsDataURL（data, function（ dataUrl ） { var downloadButton = document.createElement（"a"）, URL = window.webkitURL || window.mozURL || window.URL; downloadButton.href = dataUrl; downloadButton.download = filename; downloadButton.click（）; def.resolve（ dataUrl ）; _this.onend（）;}）; }else{cb（ data ）;def.resolve（ data ）; }}）;return def; }）;},/** * @desc 获取对应的blob数据; * @param filename 文件名; * @param callback回调, 参数为 blob; * @desc 或者可以直接传一个函数作为zip解压缩完毕的回调; * */"getData" : function （ filename, fn ） { if（ typeof filename === "string"） {this.download（filename, function（ blob ） { fn&&fn（ blob ）;}）; }else if（ typeof filename === "function"） {this.download（"test", null, function（ blob ） { filename（）;}）; };},"error" : function（） { this.onerror（ this ）; throw new Error（"压缩文件解压失败"）;} }）;</script></body></html>

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