javascript 웹 페이지 압축 풀기 및 zip 파일 보기
웹 프런트엔드에서 zip 파일의 압축을 풀면 무슨 소용이 있습니까?
표준 브라우저만 고려하면 서버는 압축 패키지를 클라이언트에게 전송하기만 하면 대역폭을 절약하고 전송 시간을 절약할 수 있다. 듣자니 대단한 말인 것 같다.
만약에 앞부분의 코드가 많고 큰 그림을 포함한다면 js와 css, jpg와 png 등 각종 데이터를 서비스 측을 통해 zip으로 포장하여 브라우저로 전송할 수 있다. 브라우저는 압력을 풀고 css는 실용적인 동적 생성을dom에 삽입할 수 있다. js도 글로벌 Eval로 직접 집행하고 jpg 또는 png 각종 이미지 파일은 blob에서 이미지로 전환한다.브라우저에 직접 삽입하기;
html5는 Blob(이진법 대상, file 파일도 Blob를 계승함)을 읽고 이미지 흐름이나 문자 흐름 또는 다른 흐름 형식으로 전환할 수 있습니다. 이것은 브라우저가'application/zip'파일을 읽을 수 있는 이유입니다.
브라우저에서 zip 파일의 압축을 풀려면 UnZipArchive 때문에 네 개의 js를 도입해야 합니다.js가 zip에 의존했습니다.js, mime-type.js와 jquery.js, 테스트 데모는 다음과 같습니다.
<script src="http://gildas-lormeau.github.io/zip.js/demos/zip.js"/>
<script src="http://gildas-lormeau.github.io/zip.js/demos/mime-types.js"/>
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"/>
<script src="http://files.cnblogs.com/files/diligenceday/UnZipArchive.js"/>
<h2>
demo
</h2>
<div>
<input type="file" id="file"/>
</div>
</code></pre><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>
</div>
<p> UnzioarichiveJS ， </p>
<p><strong> ZIP DEMO</strong><br/> </p>
<div class="jb51code">
<pre><code>
<meta charset="UTF-8"/>
<title/>
<script src="http://gildas-lormeau.github.io/zip.js/demos/zip.js"/>
<script src="http://gildas-lormeau.github.io/zip.js/demos/mime-types.js"/>
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"/>
<style>
code{
display: block;
padding: 10px;
background: #eee;
}
</style>
<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>
</code></pre>
</div>
<p> ；</p>
<div class="clearfix">
<span id="art_bot" class="jbTestPos"/>
</div>
</div>
</div>
</div> 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
