WEB前端解压ZIP压缩包 web前端解压zip文件有什么用: 只考虑标准浏览器的话, 服务器只要传输压缩包到客户端, 节约了带宽, 而且节约了传输时间, 听起来好像很厉害的说; 如果前端的代码很多, 而且包含大副的图片,那么就可以把js和css ...
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='/images/loading.gif' data-original="http://gildas-lormeau.github.io/zip.js/demos/zip.js"></script> <script src='/images/loading.gif' data-original="http://gildas-lormeau.github.io/zip.js/demos/mime-types.js"></script> <script src='/images/loading.gif' data-original="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script> <script src='/images/loading.gif' data-original="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>
原标题:通过javascript在网页端解压zip文件并查看压缩包内容
关键词:JavaScript
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。