suchen

Heim >Web-Frontend >js-Tutorial >JavaScript implementiert die Dekomprimierung und Anzeige von ZIP-Dateien auf der Webseite. Javascript-Kenntnisse

JavaScript implementiert die Dekomprimierung und Anzeige von ZIP-Dateien auf der Webseite. Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:25:471997Durchsuche

WEB-Frontend dekomprimiert ZIP-Paket

Wozu dient das Web-Frontend zum Dekomprimieren von ZIP-Dateien:

Wenn wir nur Standardbrowser berücksichtigen, muss der Server nur das komprimierte Paket an den Client übertragen, was Bandbreite und Übertragungszeit spart, was sehr beeindruckend klingt;

Wenn viel Front-End-Code vorhanden ist und große Bilder enthalten sind, können verschiedene Daten wie js, css, jpg und png über den Server in zip gepackt und an den Browser gesendet werden . CSS praktische Dynamik Generieren und in den Dom einfügen, js wird auch direkt mit globalEval ausgeführt, verschiedene JPG- oder PNG-Bilddateien werden aus Blob-Streams in Bilder konvertiert und direkt in den Browser eingefügt;

HTML5 unterstützt das Lesen von Blobs (binäre große Objekte, Dateidateien erben auch Blobs) und konvertiert sie in Bild-Streams oder Text-Streams oder andere Stream-Formate. Aus diesem Grund können Browser „Anwendungs-/Zip“-Dateien lesen

Um ZIP-Dateien im Browser zu dekomprimieren, müssen Sie vier js einführen, da UnZipArchive.js von zip.js, mime-type.js und jquery.js abhängt. Die Testdemo lautet wie folgt:

UnzioarichiveJS ist selbst gekapselt. Wenn Sie Fragen haben, geben Sie bitte rechtzeitig Feedback 
<!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>

Vollständige DEMO zum Dekomprimieren eines ZIP-komprimierten Pakets


Aber die Browserkompatibilität ist ein großes Problem
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jquery implementiert countdown effect_jqueryNächster Artikel：jquery implementiert countdown effect_jquery

In Verbindung stehende Artikel

Mehr sehen