javascript實現網頁端解壓縮並查看zip檔_javascript技巧
- WBOY原創
- 2016-05-16 15:25:471997瀏覽
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="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
<!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>
但是瀏覽器相容又是大問題；
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn