javascript实现网页端解压并查看zip文件


Posted in Javascript onDecember 15, 2015

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 是自己封装的, 有任何问题的话请及时反馈

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

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

Javascript 相关文章推荐
Js数组排序函数sort()介绍
Jun 08 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 #Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 #Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 #Javascript
JS实现DIV容器赋值的方法
Dec 14 #Javascript
JavaScript中eval()函数用法详解
Dec 14 #Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 #Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 #Javascript
You might like
php中var_export与var_dump的区别分析
2010/08/21 PHP
php使用正则验证中文
2016/04/06 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
vue router demo详解
2017/10/13 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
python 格式化输出百分号的方法
2019/01/20 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
几个常见的软件测试问题
2016/09/07 面试题
优秀士兵先进事迹
2014/02/06 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
开学季活动策划方案
2014/02/28 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书