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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
jquery 事件执行检测代码
Dec 09 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
json数据格式常见操作示例
Jun 13 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
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php时间戳转换的示例
2014/03/31 PHP
JS记录用户登录次数实现代码
2014/01/15 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
Python数据类型详解(一)字符串
2016/05/08 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
python3.6数独问题的解决
2019/01/21 Python
python基于Selenium的web自动化框架
2019/07/14 Python
python 实现生成均匀分布的点
2019/12/05 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
教师年度考核个人总结
2015/02/12 职场文书
三方合作意向书范本
2015/05/09 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
二审代理词范文
2015/05/25 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
进行数据处理的6个 Python 代码块分享
2022/04/06 Python
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang