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>要素が一度準備ができて、ダウンロードを提供するために存在すると仮定します。

例のソースコードを使用して進捗インジケータを追加できます。 これがうまくいけば、このメソッドの素晴らしい点は、あなたがそれを独自のJSファイルにすると簡単に再利用できるということです。

---

もう一つの思考：もしそうなら、私は、あなたがgetBase64Image機能from hereを使用していると推定し、あなたはまだData64URIReaderは接頭辞を期待することとして、単にreturn dataURL;への復帰を修正しようとして.replace(...をコメントアウトおそらく、破損の問題が発生します。

Answer 2

ここでは、RAMストレージのみを使用する、除外されたthat demoのバージョンがあります。 zip.js、z-worker.js、およびdeflate.jsは、zip.jsのインストールでは、以下の2つのファイルと同じディレクトリにあり、FileSaver.jsと一緒に置かれているものとします。

注：これは実績のあるコードではありません。それは私が作ったベアボーンのデモで、何が起きているのか理解することができました。プログラムでzipを生成して保存する場合は、空のファイルをzipに挿入する競合状態を避けるために、上記のような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; 
    }); 
}