这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
今天给大家介绍的文章是 js 实现的解压缩插件 zip.js,非常的简单实用,有需要的小伙伴可以参考下。
zip.js 是什么
zip.js 的 github 项目地址:http://gildas-lormeau.github.io/zip.js/
通过 zip.js 封装一个能在网页端生成 zip 文件的插件, 直接在网页中创建包含文件夹和文件的压缩包,也可以自定义名字并下载;
如何使用:
1:引用 zip.js
2:引用 jQuery;
3:并引用封装的 ZipArchive.js ,(因为 zip.js 的 api 使用起来比较繁琐, 所以自己封装实现了这个插件)
4:引用 mime-types.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/ZipArchive.js">
- </script>
- </head>
- <body>
- <script>
- var z = new ZipArchive;
- z.addFile("a/a.txt", "aaaaaaacontent");
- z.addFile("aaaa.txt", "aaaaaaaccccc");
- z.export("nono");
- </script>
- </body>
- </html>
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>
- </div>
- <script>
- zip.workerScriptsPath = "http://gildas-lormeau.github.io/zip.js/demos/";
- /**
- * @desc 压缩文件;
- * @event onprogress, onend, onerror;
- * */
- var ZipArchive = function() {
- function noop() {};
- this.name = "未命名文件";
- this.zippedBlob = {};
- var _this = this;
- this.length = 0;
- this.onend = noop;
- this.onerror = noop;
- this.onprogress = noop;
- //创建一个延迟对象;
- var def = this.defer = new $.Deferred();
- zip.createWriter(new zip.BlobWriter("application/zip"),
- function(zipWriter) {
- _this.zipWriter = zipWriter;
- //继续执行队列;
- def.resolve();
- },
- this.error);
- };
- ZipArchive.blob = function(filename, content) {
- return new Blob([content], {
- type: zip.getMimeType(filename)
- });
- };
- $.extend(ZipArchive.prototype, {
- /**
- * @desc 添加文件
- * @param String filename为文件的名字;
- * @param String content;
- * @param Object options 传参
- * 例如:{ level : 0} 压缩的等级,0 到 9;
- * 例如:{ comment : "提示文字" }
- * 例如:{ lastModDate : "最后编辑时间" }
- * */
- "addFile": function(filename, content, options) {
- var _this = this;
- blob = ZipArchive.blob(filename, content);
- //为了产生链式的效果, 必须把deferrer赋值给新的defer
- this.defer = this.defer.then(function() {
- var def = $.Deferred();
- _this.zipWriter.add(filename, new zip.BlobReader(blob),
- function() { // reader
- console.log("addFile success!!");
- def.resolve();
- //zipWriter.close(callback);
- },
- function(size, total) { //onend
- _this.onend(filename, blob, total);
- _this.length += total;
- },
- function() { //onprogress
- _this.onprogress(filename, blob, total);
- },
- options || {
- //options
- });
- return def;
- });
- },
- /**
- * @desc 添加文件夹, 我发现这个文件无法创建;
- * @desc 创建文件夹功能不好用, 需要创建文件夹你通过 zipWriter.addFile("directory/filename.txt", blob())创建文件夹和对应文件;;
- * */
- "_addFolder": function(foldername, options) {
- //创建文件夹功能目前不能用;
- //创建文件夹功能不好用, 直接通过 zipWriter.addFile("directory/filename.txt", blob())创建文件夹和文件
- return this;
- },
- "size": function() {
- return this.length;
- },
- /**
- * @desc 获取blob文件
- * */
- "get": function() {
- return this.zippedBlob;
- },
- /**
- * @desc 导出为zip文件
- * */
- "export": function(name) {
- name = name || this.name;
- var _this = this;
- this.defer.then(function() {
- _this.zipWriter.close(function(zippedBlob) {
- if (typeof name === "string" || typeof name === "number") {
- var downloadButton = document.createElement("a"),
- URL = window.webkitURL || window.mozURL || window.URL;
- downloadButton.href = URL.createObjectURL(zippedBlob);
- downloadButton.download = name + ".zip";
- downloadButton.click();
- } else {
- name(zippedBlob);
- };
- });
- });
- },
- "error": function() {
- this.onerror(this);
- throw new Error("压缩文件创建失败");
- }
- });
- </script>
- <script>
- var z = new ZipArchive;
- z.addFile("a/a.txt", "aaaaaaacontent");
- z.addFile("aaaa.txt", "aaaaaaaccccc");
- z.export("nono");
- </script>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0408/268120.html