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. NOIP2009pj道路游戏[环形DP 转移优化 二维信息]

    题目描述 小新正在玩一个简单的电脑游戏. 游戏中有一条环形马路,马路上有 n 个机器人工厂,两个相邻机器人工厂之间由一小段马路连接.小新以某个机器人工厂为起点,按顺时针顺序依次将这 n 个机器人工厂编 ...

  2. [No00003C]操作系统Operating Systems进程同步与信号量Processes Synchronization and Semaphore

    操作系统Operating Systems进程同步与信号量Processes Synchronization and Semaphore 进程合作:多进程共同完成一个任务 从纸上到实际:生产者− − ...

  3. [No000018]都在背单词，为啥学霸那么厉害-如何在一天内记200个单词？

  4. tyvj[1089]smrtfun

    描述  现有N个物品,第i个物品有两个属性A_i和B_i.在其中选取若干个物品,使得sum{A_i + B_i}最大,同时sum{A_i},sum{B_i}均非负(sum{}表示求和). 输入格式   ...

  5. 用AutoCompleteTextView实现历史记录提示

    自定义AutoCompleteTextView 博客分类: android进阶 android  网上找到的都是同ArrayAdapter一起使用的,有时候需要自定义风格,咋办?follow me! ...

  6. android gridview画分割线，如图：

    1.先上图: 2.具体实现代码: public class LineGridView extends GridView { public LineGridView(Context context) { ...

  7. jquery noConflict详解

    noConflict是防止其他库也用了$作为全局变量而引起的冲突,我们看看jquery是怎么做的 首先jquery在代码的开始部分定义了2个私有变量: _jQuery = window.jQuery ...

  8. Lobes of the brain

    Source: https://en.wikipedia.org/wiki/Lobes_of_the_brain (Except for the last figure) Terminologia A ...

  9. 内网机（无网络安装 .NET Core win开发环境

    1.安装 vs2015 update3 2.按顺序安装以下包 DotNetCore.1.0.0-SDK.Preview2-x64.exe aspnetcoremodule_x64_en_rc2_14. ...

  10. scala 学习笔记(01) 函数定义、分支、循环、异常处理、递归

    package yjmyzz import scala.io.StdIn object ScalaApp { def main(args: Array[String]) { println(" ...