我正在使用File Entries API读取拖放到网页上的文件,并最终上传它们。它需要各种复杂的代码来迭代被丢弃的文件,这看起来可能是异步的(但目前尚不清楚)。当我没有做任何特别的事情时,代码将在看到所有文件之前完成。因此,肯定需要进行一些同步。
这是我目前的猜测:
element.on("drop", function(event) {
// API spec: https://wicg.github.io/entries-api/
if (event.originalEvent.dataTransfer.items) {
addFileEntries(event.originalEvent.dataTransfer.items);
}
else {
files = event.originalEvent.dataTransfer.files;
upload(files);
}
});
function addFileEntries(entries) {
let files = [];
asyncWaitCount++;
for (const item of entries) {
// kind will be "file" for file/directory entries
if (item.kind === "file") {
const entry = item.webkitGetAsEntry();
addDroppedFile(entry, files);
}
}
asyncWaitCount--;
if (!asyncWaitCount) upload(files);
}
function addDroppedFile(entry, files) {
if (entry.isDirectory) {
let reader = entry.createReader();
asyncWaitCount++;
let readBatch = function() {
reader.readEntries(entries => {
if (entries.length === 0) {
asyncWaitCount--;
if (!asyncWaitCount) upload(files);
return;
}
entries.forEach(entry => addDroppedFile(entry, files));
readBatch();
}, error => console.warn(error));
};
readBatch();
}
if (entry.isFile) {
asyncWaitCount++;
entry.file(file => {
files.push({ file: file, path: entry.fullPath.substring(1) });
asyncWaitCount--;
if (!asyncWaitCount) upload(files);
}, error => console.warn(error));
}
}
function upload(files) {
// The actual uploading of all dropped files
}
但是我对使用asyncWaitCount
并不满意。它看起来并不太强大。例如,在addFileEntries
函数中,该值应为1,然后再次为0,因为对addDroppedFile
的调用可能在后台花费了一段时间。
那么您如何处理呢?您何时知道所有已删除的文件已被读取并且列表现已完成?