JSZip 的簡單介紹
阿新 • • 發佈：2019-01-11
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"> $(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壓縮的力度不大，相差100K左右] } }) .then(function (content) { // 壓縮的結果為blob型別 console.info(content); }); } }); }); </script> </html>
這裡只是簡單將圖片壓縮成zip包，然後以blob二進位制流的方式展示了一下，詳情可以去官網瞭解
4、參考資料