你的位置:首页 > Java教程

[Java教程]通过javascript在网页端解压zip文件并查看压缩包内容

  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 是自己封装的, 有任何问题的话反馈至github的issue

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

 

  解压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>

 

  但是浏览器兼容又是大问题;

作者: NONO
出处:http://www.cnblogs.com/diligenceday/
QQ:287101329