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. POJ1386Play on Words[有向图欧拉路]

    Play on Words Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 11846   Accepted: 4050 De ...

  2. CF 371C-Hamburgers[二分答案]

    C. Hamburgers time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  3. 为什么使用Sass

    为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE.JS而成为目前前后端统一开 ...

  4. pitch yaw roll 的区别

    http://blog.163.com/vipwdp@126/blog/static/150224366201281935518196/

  5. Rhino 是一个完全使用Java语言编写的开源JavaScript实现。Rhino通常用于在Java程序中，为最终用户提供脚本化能力。它被作为J2SE 6上的默认Java脚本化引擎。

    https://developer.mozilla.org/zh-CN/docs/Mozilla/Projects/Rhino

  6. memcache的安装和使用

    Memcache Memcached是一个高性能的分布式缓存系统.memcached自身不会实现分布式,分布式是由程序来实现的. Memcached一旦安装之后,自身进行管理!预申请一个很大的内存空间 ...

  7. umeng社交分享最新版5.0的跨进程使用崩溃的问题及解法-Android

    先简单介绍下5.0版的变化.5.0最大的特色是调用简单,采用了链式语法,形如: new ShareAction(context).setPlatform(share_media) .withText( ...

  8. 【转】LiveWriter插入高亮代码插件介绍 基于SyntaxHighighter

    转自:http://www.cnblogs.com/yaoshiyou/archive/2009/11/25/1610901.html 插件介绍 辛苦了两人小时写日志不小心浏览器崩溃了,发誓以后一定记 ...

  9. JSTL中的TLD配置和使用。

    一,JSTL介绍: JSTL标签库,是日常开发经常使用的,也是众多标签中性能最好的.把常用的内容,放在这里备份一份,随用随查.尽量做到不用查,就可以随手就可以写出来.这算是Java程序员的基本功吧,一 ...

  10. OmniPlan文档链接

    https://support.omnigroup.com/documentation/omniplan/mac/3.0/zh/introduction/#introduction