javascript实现网页端解压并查看zip文件_javascript技巧_动视

javascript实现网页端解压并查看zip文件_javascript技巧

2020-11-27 21:47:16 责编:小采

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如下：

UnzioarichiveJS 是自己封装的，有任何问题的话请及时反馈

　　解压ZIP压缩包的完整DEMO




 
 
 
 
 
 



 
 兼容性
 
 
 
 zip.js可以在所有的chrome浏览器和firefox浏览器中运行， 可以在safari6和IE10，以及IE10以上运行;
 
 
 如果要在IE9和safari中运行需要两个设置：
 
 
 1：zip.useWebWorkers == false
 
 
 2：并引用这个JS:https://bitbucket.org/lindenlab/llsd/raw/7d26cd3f9b/js/typedarray.js
 
 

 
 demo
 
 
 
 
 

 
 
 $("#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[i]+""
 };
 $("#dir").html( str );
 });
 });
 var download = function ( filename ) {
 un.download( filename );
 };

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

下载本文

显示全文

全部频道

demo

兼容性

demo