JSZip 的简单介绍

1、前言

前端处理一些批量文件或者图片时候，通过使用异步上传，减少表单一次性提交的的数据量。但是图片或者文件有删除的时候，服务器上真实的图片不容易删除。找了一些资料发些了JSZip这个技术，可以将文件或者图片打包成一个Zip文件。这就大大减少了数据的传输量。简单记录一下JSZip的用法

2、JSZip简介

这是一个JavaScript类库，用来操作.zip文件的工具。使用主要引入JSZip.js即可。

3、直接上Demo

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>测试JSZIP</title>
</head>
<body><input type="file" id="file"/><img src="" id="image">
</body>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jszip.js"></script>
<script type="text/javascript" src="js/cropper.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
<script type="text/javascript">$(function() {$("#file").change(function () {var file = this.files[0];var reader = new FileReader();reader.readAsDataURL(file);var base64 = "";reader.onload = function () {var imgData = this.result;$("#image").attr("src", imgData);var zip = new JSZip();// 向zip文件中添加图片，可以添加多个文件或者图片，此处以图片为例// base64图片需要去掉base64图片标识zip.file("car.jpg", imgData.substring(imgData.indexOf(",") + 1), {base64: true});zip.generateAsync({type: "blob",  // 压缩类型compression: "DEFLATE",      // STORE：默认不压缩 DEFLATE：需要压缩compressionOptions: {level: 9  // 压缩等级1~9    1压缩速度最快，9最优压缩方式// [使用一张图片测试之后1和9压缩的力度不大，相差100字节左右]}}).then(function (content) {// 压缩的结果为blob类型（二进制流）,可用作文件上传console.info(content);// 直接在浏览器打成car.zip包并下载，saveAs依赖的js是FileSaver.jssaveAs(content, "car.zip");});}});});
</script>
</html>

这里只是简单将图片压缩成zip包，然后以blob二进制流的方式展示了一下，详情可以去官网了解

4、详细记录generateAsync的一些参数

图片压缩最后是为了上传文件，使用generateAsync压缩后可以直接上传。简单的了解一下jszip中的相关参数，如图：

多文件打入Zip文件是，有些文件不需要重复上传或者需要做特别的说明是，生成文件的时候也可以使用“comment”属性，java后台通过解压Zip，可以直接获取"comment"属性，如： zipEntry.getComment()。

// js 可以添加文件的说明
zip.file("a.jpg", "content", {comment: "a.jpg is not a picture"
});// java后台可以直接获取
Enumeration<ZipEntry> entries = zipFile.getEntries();
while(entries.hasMoreElements()) {ZipEntry zipEntry = entries.nextElement();System.out.println(zipEntry.getComment());
}

5、参考资料

官方网址：https://stuk.github.io/jszip/

JSZip 的简单介绍相关推荐

遗传算法的简单介绍以及模式定理的简单证明
遗传算法遗传算法(Genetic Algorithm,GA),最早是由美国的John holland在20世纪70年代提出.算法通过模拟达尔文生物进化论的自然选择以及遗传学机理的生物进化过程来搜 ...
2021年大数据ELK（十八）：Beats 简单介绍和FileBeat工作原理
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 Beats 简单介绍和FileBeat工作原理一.Beats 二.FileB ...
2021年大数据ELK（十五）：Elasticsearch SQL简单介绍
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 Elasticsearch SQL简单介绍一.SQL与Elasticsear ...
2021年大数据ELK（二）：Elasticsearch简单介绍
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录系列历史文章一.Elasticsearch简介 1.介绍 2.创始人二.E ...
iOS开发UI篇—多控制器和导航控制器简单介绍
iOS开发UI篇-多控制器和导航控制器简单介绍一.多控制器一个iOS的app很少只由一个控制器组成,除非这个app极其简单.当app中有多个控制器的时候,我们就需要对这些控制器进行管理有多个vi ...
简单介绍一下R中的几种统计分布及常用模型
统计学上分布有很多,在R中基本都有描述.因能力有限,我们就挑选几个常用的.比较重要的简单介绍一下每种分布的定义,公式,以及在R中的展示. 统计分布每一种分布有四个函数:d――density(密度函数) ...
LVS(Linux Virtual Server)三种负载均衡模型和十种调度的简单介绍
LVS(Linux Virtual Server)三种负载均衡模型和十种调度的简单介绍 LVS (Linux Virtual Server) LVS(Linux Virtual Server)其实就是 ...
dubbo学习过程、使用经验分享及实现原理简单介绍
一.前言部门去年年中开始各种改造,第一步是模块服务化,这边初选dubbo试用在一些非重要模块上,慢慢引入到一些稍微重要的功能上,半年时间,学习过程及线上使用遇到的些问题在此总结下. 整理这篇文章差不 ...
iOS开发UI篇—UIWindow简单介绍
iOS开发UI篇-UIWindow简单介绍一.简单介绍 UIWindow是一种特殊的UIView,通常在一个app中只会有一个UIWindow iOS程序启动完毕后,创建的第一个视图控件就是UIWi ...
django中使用celery简单介绍
链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载. 本章节我们重点在于实现,如何存储任务的结果. 我们将任务函数改为: from celery_demo.celery im ...

JSZip 的简单介绍

JSZip 的简单介绍相关推荐

最新文章

热门文章