如何使用zip.js將多個文件添加到zip中？

Question

我正在使用javascript zip.js庫。我遍尋全球我無法找到一個將多個文件添加到壓縮文件的示例。

這是我的代碼，但它會生成一個「損壞」的zip。

var len = results.rows.length, i; 
var k=1; 
zip.createWriter(new zip.BlobWriter(), function(writer) { 
    for (i = 0; i < len; i++){ 
     // get the image url from a sqlite request 
     url = results.rows.item(i).url; 


     var img = new Image(); 
     img.onload = function() { 
      var a = document.createElement('a'); 
      a.href = this.src; 
      var filename= a.pathname.split('/').pop(); // filename.php 
      timest = new Date().getTime(); 
      // use a TextReader to read the String to add 

       writer.add(timest+".jpg", new zip.Data64URIReader(getBase64Image(img)), function() { 
       // onsuccess callback 
        k++; 
        if(k==len){ 
         setTimeout(function(){ 
         writer.close(function(blob) { 

          // blob contains the zip file as a Blob object 
          $('#test').attr("href", window.URL.createObjectURL(blob)); 
          $('#test').attr("download", "woeii.zip"); 

         }); 
         },1000); 
        } 
       }, function(currentIndex, totalIndex) { 
       // onprogress callback 
       }); 



     }; 
     img.src = url; 
    } 
}); 

任何想法，使其工作？ :)

Answer 1

如果您正在尋找一個處理多個文件的代碼的好例子，see here。您可以然後view the source code。

此爲演示（只是略有修改）的主要來源：

var obj = this; 
var model = (function() { 
    var zipFileEntry, zipWriter, writer, creationMethod, URL = obj.webkitURL || obj.mozURL || obj.URL; 

    return { 
     setCreationMethod : function(method) { 
      creationMethod = method; 
     }, 
     addFiles : function addFiles(files, oninit, onadd, onprogress, onend) { 
      var addIndex = 0; 

      function nextFile() { 
       var file = files[addIndex]; 
       onadd(file); 
       // Modified here to use the Data64URIReader instead of BlobReader 
       zipWriter.add(file.name, new zip.Data64URIReader(file.data), function() { 
        addIndex++; 
        if (addIndex < files.length) 
         nextFile(); 
        else 
         onend(); 
       }, onprogress); 
      } 

      function createZipWriter() { 
       zip.createWriter(writer, function(writer) { 
        zipWriter = writer; 
        oninit(); 
        nextFile(); 
       }, onerror); 
      } 

      if (zipWriter) 
       nextFile(); 
      else if (creationMethod == "Blob") { 
       writer = new zip.BlobWriter(); 
       createZipWriter(); 
      } else { 
       createTempFile(function(fileEntry) { 
        zipFileEntry = fileEntry; 
        writer = new zip.FileWriter(zipFileEntry); 
        createZipWriter(); 
       }); 
      } 
     }, 
     getBlobURL : function(callback) { 
      zipWriter.close(function(blob) { 
       var blobURL = creationMethod == "Blob" ? URL.createObjectURL(blob) : zipFileEntry.toURL(); 
       callback(blobURL); 
       zipWriter = null; 
      }); 
     }, 
     getBlob : function(callback) { 
      zipWriter.close(callback); 
     } 
    }; 
})(); 

用法： 假定<a id="downloadLink">Download</a>元素存在提供下載，一旦準備就緒。

// Prepare your images 
var files = []; 
for (i = 0; i < len; i++) { 

    // Get the image URL from a SQLite request 
    var url = results.rows.item(i).url; 

    (function(url){ 
     var img = new Image(); 
     img.onload = function() { 
      // Add to file array [{name, data}] 
      var a = document.createElement('a'); 
      a.href = this.src; 
      var filename= a.pathname.split('/').pop(); 

      console.log("Loaded file " + filename); 
      files.push({name: filename, data: getBase64Image(img) }); 
     } 
     img.src = url; 
    })(url); 
} 

// Wait for the image to load 
var check = setInterval(function(){ 
    if(files.length==images.length) { 
     clearInterval(check); 

     // Set the mode 
     model.setCreationMethod("Blob"); 

     // Add the files to the zip 
     model.addFiles(files, 
      function() { 
       // Initialise Method 
       console.log("Initialise"); 
      }, function(file) { 
       // OnAdd 
       console.log("Added file"); 
      }, function(current, total) { 
       // OnProgress 
       console.log("%s %s", current, total); 
      }, function() { 
       // OnEnd 
       // The zip is ready prepare download link 
       // <a id="downloadLink" href="blob:url">Download Zip</a> 
       model.getBlobURL(function(url) { 
        document.getElementById("downloadLink").href = url; 
        document.getElementById("downloadLink").style.display = "block"; 
        document.getElementById("downloadLink").download = "filename.zip"; 
       }); 
      }); 

    } 
}, 500); 

您可以使用示例源代碼添加進度指示器。 希望這會有所幫助，關於這種方法的好處是zip模型很容易重用，如果你使它成爲自己的JS文件。

---

另一個想法：我想你使用的是getBase64Image功能from here，如果是的話，你仍然遇到腐敗問題，也許嘗試修改迴歸簡單return dataURL;並註釋掉.replace(...，作爲Data64URIReader可能期望前綴。

Answer 2

這是一個精簡版的that demo，只使用RAM存儲。它假定zip.js安裝中的zip.js，z-worker.js和deflate.js與FileSaver.js一起與下面的兩個文件位於同一目錄中。

注意：這不是生產就緒的代碼！這是我做的一個簡單的演示，所以我可以弄清楚發生了什麼。如果以編程方式生成並保存壓縮文件，則可能需要實現像上面那樣的nextFile（）迭代器，以防止競爭條件使用空文件填充壓縮文件。 （對於這樣的一個例子見https://stackoverflow.com/a/29738675/738675）。

demo.html：

<li> 
    add files into the zip 
    <input type="file" multiple id="file-input" onchange="addFiles(this.files)"> 
</li> 
<li> 
    download the zip file 
    <a href="#" onclick="saveZip()">Download</a> 
</li> 

<script type="text/javascript" src="zip.js"></script> 
<script type="text/javascript" src="demo.js"></script> 
<script type="text/javascript" src="FileSaver.js"></script> 

demo.js：

var zipWriter; 

function addFiles(files) { 
    writer = new zip.BlobWriter(); 
    zip.createWriter(writer, function(writer) { 
     zipWriter = writer; 
     for (var f = 0; f < files.length; f++) { 
      zipWriter.add(files[f].name, 
      new zip.BlobReader(files[f]), function() {}); 
     } 
    }); 
} 

function saveZip() { 
    zipWriter.close(function(blob) { 
     saveAs(blob, "Example.zip"); // uses FileSaver.js 
     document.getElementById("file-input").value = null; // reset input file list 
     zipWriter = null; 
    }); 
}