只考虑标准浏览器的话， 服务器只要传输压缩包到客户端， 节约了带宽， 而且节约了传输时间， 听起来好像很厉害的说；
如果前端的代码很多， 而且包含大副的图片，那么就可以把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=0i<arr.lengthi++ ) {//点击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=0i<arr.lengthi++ ) { 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<leni++ ) {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<leni++ ) {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) returnif(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>
项目用到了jszip.js插件,用于在后台获取zip文件,前端解压并将模型进行在线显示.官网jszip的API说明为英文,例子其实也有些模糊. 远程加载一个文件, 使用官网的例子 :(自行观看) 这里作为笔记,主要是想说 promise.then(JSZip.loadAsync) .then(function( zip ){returnzip.file("Hello.txt").async("string") 此处可以返回一个值,返回的值就是下一个.then的实参 })这里的zip就是读取到的zip的数据,主要的属性诸如files就是zip中的文件,可以通过zip.file(filename)的形式将该文件对象进行存储,但是这里的文件对象其实是一个promise,当我们需要使用的时候可以通过.then 的形式使用 例如: pic.then(function(data){ //data就是该文件的数据,得到data后可以通过使用,这里就需要注意我们在存储的时候可以通过使用zip.file(filename).async(数据形式)来定义数据的存储形式,例如base64,blob,arraybuffer,其中base64是图片的存储格式,但是是没有前缀的,必须加相应的前缀才可以显示.data:image/pngbase64就可以直接赋值给image.src })
