如何使用 XMLHttpRequest 一张一张地多次上传答案

【问题标题】：how to multi upload one by one with XMLHttpRequest如何使用 XMLHttpRequest 一张一张地多次上传
【发布时间】：2017-07-13 03:08:42
【问题描述】：

我正在使用 XMLHttpRequest 上传图片，我希望每张图片都有不同的进度（我想上传多张但不是一次选择）。我的意思是我会选择一张图片，它正在上传……然后我会选择另一张图片，我想上传不同的进度

$('#fileToUpload').change(function(){
            var file = this.files;
            var xhr = new XMLHttpRequest();
            var formdata = new FormData();
            formdata.append("_token", Laravel.csrfToken);
            formdata.append('file',file[0]);
            xhr.open('post','/new/upload',true);
            xhr.send(formdata);
});



xhr.upload.addEventListener('progress',function (e) {
    var percent = Math.round(e.loaded/e.total*100);
    $('.loading1').css('width' , percent+'%');
});

【问题讨论】：

没有什么能阻止你发出多个请求，它们异步的原因不止一个，除非问题出在加载栏本身，那么我建议考虑如何使用变量选择器
好的，我会发送多个 .但我怎样才能得到他们每个人的回应？图片我发送了 3 个 xhr 到服务器，最后我想在客户端显示他们的名字。
假设您正在发出一个新请求，它们每个都有不同的引用，因此它们将具有唯一的事件侦听器，或者使用不太通用的流行语......每个请求都不同，您可以绑定一个进度处理程序特定于每个处理程序
@PatrickBarr 我有这个：xhr.upload.addEventListener('progress',function (e) {

标签： javascript jquery file-upload xmlhttprequest form-data

【解决方案1】：

正如我在 cmets 中提到的，没有什么可以阻止您收到多个请求，这里要记住的关键是，当您创建 new 请求时，每个请求都有自己唯一的引用。

这让我们可以做一些漂亮的事情，比如制作一个通用函数来处理上传我们的新文件！

$('#fileToUpload').change(function(){
    // If we're always uploading when we add a new file then we can
    // assume the last file is the next to upload
    var index = this.files.length - 1;

    // Here I suggest that you actually use ids to select your loading
    // indicators, that way they can all keep the same style and not affect
    // each other's progress
    uploadFile(this.files[index], '#loading' + index);
});

// Here we define a function that will handle our upload, taking the file
// and the jQuery selector for the loading indicator as parameters
function uploadFile(img, progressBarSel) {
    var xhr = new XMLHttpRequest();
    var formdata = new FormData();
    formdata.append("_token", Laravel.csrfToken);
    formdata.append('file',img);
    xhr.open('post','/new/upload',true);
    xhr.send(formdata);

    // Just a little flair, that allows us to optionally have a selector
    // not having one just means this won't setup the indicator
    if(progressBarSel) {
        xhr.upload.addEventListener('progress',function (e) {
            var percent = Math.round(e.loaded/e.total*100);

            // Here we simply use a variable as the selector
            // Note how this differ from than the question, which selected a
            // specific class rather than a "generic" selector
            $(progressBarSel).css('width' , percent+'%');
        });
    }

    // Return the reference to the request incase we want to do more with it
    return xhr;
}

注意：我假设无论fileToUpload 是预先正确填充的文件数组。如果您想知道如何为更多图片创建新的进度条，我会查看其他一些问题，例如 Creating a div element in jQuery。请记住，您已经有了一个，所以剩下的就是知道如何创建更多（使用更少的代码！）。

我也忍不住注意到你说：

我想和不同的进度一起上传

让我印象深刻的词是“在一起”。我认为，如果您以不同的方式思考这一点真的很有帮助，而不是“一起”思考“同时”，它们非常相似，但有一个关键区别：“同时“并没有推断出它们是相关的。如果您将每次上传视为一个单独的事件，恰好与另一个事件同时发生，那么您会更清楚地了解 Web 浏览器中发生的事情，以及如何设计代码来完成您的工作想要！

【讨论】：