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>
但是浏覽器兼容又是大問題；