文件条目API:何时完成?

时间:2019-01-26 15:49:52

标签: javascript html drag-and-drop

我正在使用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的调用可能在后台花费了一段时间。

那么您如何处理呢?您何时知道所有已删除的文件已被读取并且列表现已完成?

0 个答案:

没有答案