Question

我正在使用zip.js加载一个充满.pngs的.zip文件，然后对于每个条目，我将一个Image元素的源设置为getData生成的Blob：

zip.createReader(new zip.BlobReader(zipFile), function(reader) {
    reader.getEntries(function(entries) {
        for (var i = 0; i < entries.length; i++) {
            var pid = entries[i].filename.replace('.png', '');
            var img = document.getElementById('MCImg_' + pid);
            if (img) {
                entries[i].getData(new zip.BlobWriter('text/plain'), function(data) {
                    // I need to know the filename associated with `data` here
                    // so I can know which `img` to set the src of
                })
            }
        }
        //reader.close();
    })
}, function(error) {
    console.log('error reading zip');
});

getData回调不会以任何可预测的顺序发生，因此如果不与任何特定文件名绑定，我怎么知道如何处理所生成的data？我觉得这应该是一个非常常见的用例和一个容易回答的问题，但我搜索无济于事......

同样，如果我不知道上一次getData来电何时完成，我怎么知道何时关闭读者？

Answer 1

我通过将getData调用包装在单独的函数中来解决此问题，以便在每个回调中仍然可以使用正确的pid。看起来似乎缺乏zip.js中的功能。

function loadImagesFromZip(bin) {
    var zipFile = zips[bin];
    if (!(zipFile))
        return;
    zip.createReader(new zip.BlobReader(zipFile), function(reader) {
        reader.getEntries(function(entries) {
            for (var i = 0; i < entries.length; i++) {
                var pid = entries[i].filename.replace('.png', '');
                loadImage(pid, entries[i]);
            }
        })
    }, function(error) {
        console.log('error reading zip');
    });
}

function loadImage(pid, entry) {
    var img = document.getElementById('MCImg_' + pid);
    if (img && !img.src) {
        entry.getData(new zip.BlobWriter('text/plain'), function(data) {
            if (img) {
                img.src = URL.createObjectURL(data);
            }
        });
    }
}

zip.js在getData回调中获取文件名

1 个答案: