經過javascript在網頁端解壓zip文件並查看壓縮包內容

時間 2019-11-12

標籤經過 javascript 網頁解壓 zip 文件查看壓縮包內欄目 JavaScript 简体版

原文原文鏈接

　　WEB前端解壓ZIP壓縮包

　　web前端解壓zip文件有什麼用：css

　　　　只考慮標準瀏覽器的話，服務器只要傳輸壓縮包到客戶端，節約了帶寬，並且節約了傳輸時間，聽起來好像很厲害的說；html

　　若是前端的代碼不少，並且包含大副的圖片，那麼就能夠把js和css和jpg和png等各類數據經過服務端打包成zip傳送到瀏覽器，瀏覽器負責解壓， css實用動態生成插入到dom中，js也用globalEval直接執行， jpg或者png各類圖片文件由blob流轉化爲image，直接插入到瀏覽器中；前端

　　html5支持讀取Blob(二進制大對象, file文件也是繼承了Blob)，並轉化爲圖片流或者文字流或者其餘流格式，這也是爲何瀏覽器能夠讀取"application/zip"文件的緣由；html5

　　要在瀏覽器中解壓zip文件的話須要引入四個js ，由於UnZipArchive.js依賴了zip.js, mime-type.js和jquery.js , 測試demo以下：jquery

<!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 是本身封裝的，有任何問題的話反饋至github的issuegit

https://github.com/sqqihao/nono_framework/issues?q=is%3Aopen+is%3Aissue

　　解壓ZIP壓縮包的完整DEMO

　　由於zipJS依賴Worker，因此要在http協議下才能正常使用，我把html放在git ：http://sqqihao.github.io/codes/zipjs/zip.htmlgithub

　　可是瀏覽器兼容又是大問題；web

做者： NONO
出處：http://www.cnblogs.com/diligenceday/
QQ：287101329 瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。