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如下：
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
<scriptsrc="http://gildas-lormeau.github.io/zip.js/demos/zip.js"></script>
<scriptsrc="http://gildas-lormeau.github.io/zip.js/demos/mime-types.js"></script>
<scriptsrc="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
<scriptsrc="http://files.cnblogs.com/files/diligenceday/UnZipArchive.js"></script>
</head>
<body>
<h2>
demo
</h2>
<div>
<inputtype="file"id="file">
</div>
<ulid="dir">
</ul>
<script>
$("#file").change(function(e){
varfile=this.files[0];
window.un=newUnZipArchive(file);
un.getData(function(){
//获取所以的文件和文件夹列表;
vararr=un.getEntries();
//拼接字符串
varstr="";
for(vari=0;i<arr.length;i++){
//点击li的话直接下载文件;
str+="<lionclick=download('"+arr[i]+"')>"+arr[i]+"</li>"
};
$("#dir").html(str);
});
});
vardownload=function(filename){
un.download(filename);
};
</script>
</body>
</html>
UnzioarichiveJS是自己封装的，有任何问题的话请及时反馈
解压ZIP压缩包的完整DEMO
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
<scriptsrc="http://gildas-lormeau.github.io/zip.js/demos/zip.js"></script>
<scriptsrc="http://gildas-lormeau.github.io/zip.js/demos/mime-types.js"></script>
<scriptsrc="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>
<inputtype="file"id="file">
</div>
<ulid="dir">
</ul>
<script>
$("#file").change(function(e){
varfile=this.files[0];
window.un=newUnZipArchive(file);
un.getData(function(){
vararr=un.getEntries();
varstr="";
for(vari=0;i<arr.length;i++){
str+="<lionclick=download('"+arr[i]+"')>"+arr[i]+"</li>"
};
$("#dir").html(str);
});
});
vardownload=function(filename){
un.download(filename);
};
</script>
</div>
<script>
zip.workerScriptsPath="http://gildas-lormeau.github.io/zip.js/demos/";
/**
*@desc解压缩文件的类;
*@returnUnZipArchive的实例;
**/
varUnZipArchive=function(blob){
if(!blob){
alert("参数不正确,需要一个Blob类型的参数");
return;
};
if(!(blobinstanceofBlob)){
alert("参数不是Blob类型");
return;
};
functionnoop(){};
this.entries={};
this.zipReader={};
var_this=this;
this.length=0;
this.onend=noop;
this.onerror=noop;
this.onprogress=noop;
//创建一个延迟对象;
vardef=this.defer=new$.Deferred();
zip.createReader(newzip.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){
varf=newFileReader();
f.onload=function(e){callback(e.target.result);};
f.readAsDataURL(blob);
};
$.extend(UnZipArchive.prototype,{
/**
*@desc获取压缩文件的所有入口;
*@returnArrayList;
**/
"getEntries":function(){
varresult=[];
for(vari=0,len=this.entries.length;i<len;i++){
result.push(this.entries[i].filename);
}
returnresult;
},
/**
*@desc获取文件Entry;
*@returnEntry
**/
"getEntry":function(filename){
varentrie;
for(vari=0,len=this.entries.length;i<len;i++){
if(this.entries[i].filename===filename){
returnthis.entries[i];
};
}
},
/**
*@desc下载文件
*@paramfilename;
*@returnvoid;
**/
"download":function(filename,cb,runoninit){
var_this=this;
this.defer=this.defer.then(function(){
vardef=$.Deferred();
if(!filename)return;
if(runoninit){
returnrunoninit();
};
varentry=_this.getEntry(filename);
if(!entry)return;
entry.getData(newzip.BlobWriter(zip.getMimeType(entry.filename)),function(data){
if(!cb){
UnZipArchive.readBlobAsDataURL(data,function(dataUrl){
vardownloadButton=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);
}
});
returndef;
});
},
/**
*@desc获取对应的blob数据;
*@paramfilename文件名;
*@paramcallback回调,参数为blob;
*@desc或者可以直接传一个函数作为zip解压缩完毕的回调;
**/
"getData":function(filename,fn){
if(typeoffilename==="string"){
this.download(filename,function(blob){
fn&&fn(blob);
});
}elseif(typeoffilename==="function"){
this.download("test",null,function(blob){
filename();
});
};
},
"error":function(){
this.onerror(this);
thrownewError("压缩文件解压失败");
}
});
</script>
</body>
</html>
但是浏览器兼容又是大问题；