异步上传多个文件而不互相踩踏？答案

【问题标题】：Uploading multiple files asynchronously without stomping on each other?异步上传多个文件而不互相踩踏？
【发布时间】：2013-11-22 23:23:47
【问题描述】：

这是我的代码，我有使用此代码上传的文件，但几乎每次都有 2 个或更多文件由于相同类型的错误而无法成功：

http://localhost:8080/_ah/upload/ag9mdW5ueS1wYWdlcy1ocmRyIgsSFV9fQmxvYlVwbG9hZFNlc3Npb25fXxiAgICAgICKCgw 
404 (No upload session: ag9mdW5ueS1wYWdlcy1ocmRyIgsSFV9fQmxvYlVwbG9hZFNlc3Npb25fXxiAgICAgICKCgw)

现在我需要为每个文件获取不同的上传 URL。 getUploadURL() 为每次调用返回完全相同的 URL。

Cache Busting 也无济于事。

我已尝试使用 Ext.TaskManager，但没有它，结果相同，上面发布的错误至少出现在我用来测试的 10 个文件中的 2 个上。

var files = Ext.getDom('select-upload-button-fileInputEl').files;

function uploadFile(url, f) {
    var fd = new FormData();
    fd.append('file', f, f.name);
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', function (e) {
        console.log(f.name + " : " + (e.loaded / e.total) * 100 + "%");
    });
    xhr.upload.addEventListener('load', function (e) {
        console.log(f.name + ' Transfer Complete');
    });
    xhr.open('POST', url, true);
    xhr.send(fd);
}

function getUploadURL(f) {
    var xhr = new XMLHttpRequest();
    xhr.addEventListener('load', function () {
        var url = this.responseText;
        console.log(url);
        var task = Ext.TaskManager.start({
            run: uploadFile(url, f)
        });
    });
    xhr.open('GET', '/upload', true);
    xhr.send()
}


Ext.each(files, function (f) {
    var task = Ext.TaskManager.start({
        run: getUploadURL(f)
    });
});

如果我将代码更改为执行xhr.open('GET', '/upload', false); 和xhr.open('POST', url, false);，它会按预期工作，但如果可能的话我宁愿让它异步。

只接受 HTML5 的解决方案。

【问题讨论】：

标签： javascript html google-app-engine extjs xmlhttprequest

【解决方案1】：

我能够让它与以下行一起工作：

xhr.open('POST', url, false);

而不是

xhr.open('POST', url, true);

我真的希望有一个异步解决方案，但现在我只需要让它工作。

【讨论】：