在线html解压,javascript实现⽹页端解压并查看zip⽂件
WEB前端解压ZIP压缩包
web前端解压zip⽂件有什么⽤：
html个人网页完整代码图片只考虑标准浏览器的话， 服务器只要传输压缩包到客户端， 节约了带宽， ⽽且节约了传输时间， 听起来好像很厉害的说；
如果前端的代码很多， ⽽且包含⼤副的图⽚，那么就可以把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如下：
demo
$("#file").change(function (e) {
var file = this.files[0];
window.un = new UnZipArchive( file );
//获取所以的⽂件和⽂件夹列表;
var arr = un.getEntries();
//拼接字符串
var str = "";
for(var i=0; i
//点击li的话直接下载⽂件;
str += "
"+arr[i]+""
};
$("#dir").html( str );
});
});
var download = function ( filename ) {
un.download( filename );
};
UnzioarichiveJS 是⾃⼰封装的， 有任何问题的话请及时反馈
解压ZIP压缩包的完整DEMO
code{
display: block;
padding: 10px;
background: #eee;
}
兼容性
zip.js可以在所有的chrome浏览器和firefox浏览器中运⾏， 可以在safari6和IE10，以及IE10以上运⾏；如果要在IE9和safari中运⾏需要两个设置：
incongruity
1：zip.useWebWorkers == false
demo
$("#file").change(function (e) {
var file = this.files[0];
window.un = new UnZipArchive( file );
aptana studio 3字体大小
var arr = un.getEntries();
var str = "";
for(var i=0; i
str += "
"+arr[i]+""
};
$("#dir").html( str );
});
});
var download = function ( filename ) {
un.download( filename );
};
zip.workerScriptsPath = "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.zipReader = {};
var _this = this;
this.length = 0;
flexibility可数
//创建⼀个延迟对象;
var def = this.defer = new $.Deferred();
_ies = entries;
//继续执⾏队列;
});
}, bind(_this) );
};
/**
* @desc 把blob⽂件转化为dataUrl;
* */
var f = new FileReader();
};
$.extend( UnZipArchive.prototype, {
/**
* @desc 获取压缩⽂件的所有⼊⼝;
* @return ArrayList;
* */
"getEntries" : function() {
var result = [];
for(var i= 0, len = ies.length ; i
result.push( ies[i].filename );
}
return result;
},
/**
* @desc 获取⽂件Entry;
* @return Entry
* */
"getEntry" : function ( filename ) {
var entrie;
for(var i= 0, len = ies.length ; i
if( ies[i].filename === filename) {
ies[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 = _Entry( filename );
if(!entry)return;
js正整数正则表达式
var downloadButton = ateElement("a"),
URL = window.webkitURL || URL || window.URL;
downloadButton.href = dataUrl;
downloadButton.download = filename;
downloadButton.click();
_d();
});
}else{
cb( 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();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。