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 相关文章推荐
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
javascript基本语法
May 31 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 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函数之日期时间函数date()使用详解
2013/09/09 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
php远程下载类分享
2016/04/13 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
工程造价自荐信
2013/10/09 职场文书
个人简历自我评价范文
2014/02/04 职场文书
婚前协议书
2014/04/15 职场文书
环保倡议书范文
2014/05/12 职场文书
工程负责人任命书
2014/06/06 职场文书
投诉信格式范文
2015/07/02 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL