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[];

        window.un = new UnZipArchive( file );

        un.getData( function() {

            //获取所以的文件和文件夹列表;

            var arr = un.getEntries();

            //拼接字符串

            var str = "";

            for(var i=; 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

　　因为zipJS依赖Worker， 所以要在http协议下才能正常使用， 我把html放在git ：http://sqqihao.github.io/codes/zipjs/zip.html

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

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

QQ：287101329

通过javascript在网页端解压zip文件并查看压缩包内容的更多相关文章

  1. Android 解压zip文件(支持中文)

    过了n多天后,当再次使用原先博客上写的那篇: Android 压缩解压zip文件 去做zip包的解压的时候,出现了原来没有发现的很多问题.首先是中文汉字问题,使用java的zip包不能很好的解决解压问 ...

  2. （转载）C#压缩解压zip 文件

    转载之: C#压缩解压zip 文件 - 大气象 - 博客园http://www.cnblogs.com/greatverve/archive/2011/12/27/csharp-zip.html C# ...

  3. Android 解压zip文件你知道多少？

    对于Android常用的压缩格式ZIP,你了解多少? Android的有两种解压ZIP的方法,你知道吗? ZipFile和ZipInputStream的解压效率,你对比过吗? 带着以上问题,现在就开始 ...

  4. java实现解压zip文件，(亲测可用)！！！！！！

    项目结构: Util.java内容: package com.cfets.demo; import java.io.File; import java.io.FileOutputStream; imp ...

  5. Android 解压zip文件

    过了n多天后,当再次使用原先博客上写的那篇: Android 压缩解压zip文件 去做zip包的解压的时候,出现了原来没有发现的很多问题.首先是中文汉字问题,使用java的zip包不能很好的解决解压问 ...

  6. python用zipfile模块打包文件或是目录、解压zip文件实例

    #!/usr/bin/env python # -*- coding: utf-8 -*- from zipfile import * import zipfile #解压zip文件 def unzi ...

  7. AIX解压ZIP文件

    AIX系统自身是没有解压ZIP文件的,但在AIX安装oracle数据库服务器的话,在$ORACLE_HOME/bin路径下方却有unzip命令,可以解压ZIP文件. 一.shell脚本   之前的版本 ...

  8. linux 解压zip文件

    linux 解压zip文件 学习了:https://blog.csdn.net/hbcui1984/article/details/1583796 unzip xx.zip

  9. Java 上传解压zip文件，并且解析文件里面的excel和图片

    需求:上传一个zip文件,zip文件里面包含一个excel和很多图片,需要把excel里面的信息解析出来保存到表中,同时图片也转化成base64保存到数据库表中. PS:为了方便不同水平的开发人员阅读 ...

随机推荐

  1. 使用ztree.js，受益一生，十分钟学会使用tree树形结构插件

    看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...

  2. guava 学习笔记 使用瓜娃（guava）的选择和预判断使代码变得简洁

    guava 学习笔记 使用瓜娃(guava)的选择和预判断使代码变得简洁 1,本文翻译自 http://eclipsesource.com/blogs/2012/06/06/cleaner-code- ...

  3. Openvpn 公网访问内网

    对于需要从公网访问内网的情况, 需要做如下配置 从公网到内网 除了设置net.ipv4.ip_forward = 1 以外, 还需要设置iptables, 增加两行forward # Generate ...

  4. Debian 8.2 下安装MySQL5.7.9 Generic Binaries

    安装过程参考了Installing MySQL on Unix/Linux Using Generic Binaries 首先检查是否安装libaio shell> apt-cache sear ...

  5. dubbo2.5.3 与spring 3.1.x 冲突

    在集成了dubbo2.5.3 的项目中初始化出现 MalformedParameterizedTypeException 检查发现这是因为dubbo2.5.3依赖的springframeworks是2 ...

  6. BZOJ 1024 【SCOI2009】 生日快乐

    Description windy的生日到了,为了庆祝生日,他的朋友们帮他买了一个边长分别为 X 和 Y 的矩形蛋糕.现在包括windy,一共有 N 个人来分这块大蛋糕,要求每个人必须获得相同面积的蛋 ...

  7. 将packages/apps/下的app导入eclipse

    当刚接触android自带的一个模块时,如何去熟悉它?相信不少人第一步都会尝试着去了解其内容的调用流程,而此时若能够单步调试则显得非常重要了,于是有了文章标题所说的尝试. 作者这里要导入的是Setti ...

  8. Spring MVC 前后端 Json 方式交互和处理

    众所周知,在mvc中,数据是在各个层次之间进行流转是一个不争的事实. 而这种流转,也就会面临一些困境,这些困境,是由于数据在不同世界中的表现形式不同而造成的.   数据在页面上是一个扁平的,不带数据类 ...

  9. python2.1-原理之琐碎技巧

    本系列依据<python学习手册第四版>而写,也算是个学习笔记吧,选择本书的原因在于它不同于第三版,它强调介绍python3.0 ,而会在不同的地方给出2.6版本的区别,:本书侧重介绍原理 ...

  10. Theano2.1.7-基础知识之设置的配置和编译模式

    来自:http://deeplearning.net/software/theano/tutorial/modes.html Configuration Settings and Compiling ...