javascript实现网页端解压并查看zip文件
内容摘要
WEB前端解压ZIP压缩包
web前端解压zip文件有什么用:
只考虑标准浏览器的话, 服务器只要传输压缩包到客户端, 节约了带宽, 而且节约了传输时间, 听起来好像很厉害的说
web前端解压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如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 | <!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> |
但是浏览器兼容又是大问题;
代码注释