Zip 由 JSZip 生成，仅包含单个图像文件

Question

I am trying to generate zip from images using JSZip. But every time i get only single image in zip instead of 100 images. Here is my code

   $("#download-images-small").on("click", function(){

        var zip = new JSZip();
        var count = 0;
        var zipFilename = "zipFilename.zip";
        var selections = $('.checkbox:checked')  //This returns an array of checkbox selected elements. 
        // Each checkbox contains URL in its data attribute ie. selections = ['url1', 'url2', 'url3'...]. See HTML Code.  

        for (var i = selections.length - 1; i >= 0; i--) {
            var filename = "filename"+ i +"."+ $(selections[i]).data("type");
            // loading a file and add it in a zip file
            console.log($(selections[i]).data("href"))
            JSZipUtils.getBinaryContent($(selections[i]).data("href"), function (err, data) {
               if(err) {
                  throw err; // or handle the error
               }
               zip.file(filename, data, {binary:true});
               count++;
               if (count == selections.length) {
                 zip.generateAsync({type:'blob'}).then(function(content) {
                      saveAs(content, zipFilename);
                   });
               }
            });
        }
    })

HTML code:

<div class="fetched-images">
    <%= image_tag obj["url"], class: "img-fluid", title: obj["title"] , data:{ type: obj["ity"] }, crossOrigin: "Anonymous" %>
    <label class="checkbox-container">
        <input type="checkbox" data-type="<%= file_type %>" data-href="<%= file_url %>" checked="checked" class="this-image">
        <span class="checkmark"></span>
    </label>
</div>

Answer 1

Its quite simple.

JSZipUtils.getBinaryContent calls a callback inside which you are appending filesto zip . And since callbacks don't run in same context it doesn't have access to your updated filename variable and always takes the last assigned value (in your case filename0) and use this variable for each iteration hence rewriting the same file instead of adding new. Call something which is unique inside the callback for filename.