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. leetcode-Count Primes 以及python的小特性

    题目大家都非常熟悉,求小于n的所有素数的个数. 自己写的python 代码老是通不过时间门槛,无奈去看了看大家写的code.下面是我看到的投票最高的code: class Solution: # @p ...

  2. 《Python核心编程》部分错误纠正(勘误表)(持续更新)

    Chapter 3: 例3-1 makeTextFile.py #!/usr/bin/env python 'makeTextFile.py' import os ls = os.linesep #g ...

  3. KEngine：Unity3D资源的打包、加载、调试监控

    资源模块做什么? 资源模块——ResourceModule,是KEngine中最核心的模块,其他模块基本或多或少的对它有依赖,它主要的功能是:资源打包.路径定义.资源管理.资源调试. 资源模块对Uni ...

  4. 转: Eclipse 分屏显示同一个文件

    Eclipse 分屏显示同一个文件   场景 : 某个类很大,可能有数千行.当你想要将类开头部分与中间或者靠后的部分进行对比时,请follow如下步骤: Window -> Editor -&g ...

  5. 用mysql触发器实现log记录

    首先建立两张测试用表 mysql> desc pay; +-------+---------------+------+-----+---------+----------------+ | F ...

  6. 常见HTTP状态基本解释

    本文摘自互联网,但是忘记了具体网址,请见谅 在网站建设的实际应用中,容易出现很多小小的失误,就像mysql当初优化不到位,影响整体网站的浏览效果一样,其实,网站的常规http状态码的表现也是一样,Go ...

  7. Web API删除JSON格式的文件记录

    Insus.NET的系列Web Api学习文章,这篇算是计划中最后一篇了,删除JSON格式的文件记录.前一篇<Web Api其中的PUT功能演示>http://www.cnblogs.co ...

  8. cpu负载和利用率

    理解Linux系统负荷 linux里的CPU负载

  9. Implement Queue using Stacks

    Implement the following operations of a queue using stacks. push(x) -- Push element x to the back of ...

  10. 批量修改string中的字符

    #1,修改"/"为"\\",多用于在txt读取内容后进行修改 size_t pos0 = mkfolder.find("/");//首次查找 ...