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.js
saveAs(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、参考资料
官方网址:JSZip