Jquery 使用AJAX和formData上载多个文件（单独，而不是同时上载多个文件）

我有一个表单，其中需要通过三个单独的文件输入进行三次文件上传。使用AJAX和

formData

我可以获得要上载的第一个文件，但任何后续文件都不会上载

我认为问题与这一行代码有关：

var formData=new formData（$（“form”）[0]）

我想我需要以某种方式迭代以确定上传文件的数量，但是我不确定实现这一点的逻辑。我的代码如下：

$("#uploadA, #uploadB, #uploadC").click(function(){
    var formData = new FormData($("form")[0]);
    var progress = $(this).prop("id");

    $.ajax({
        url: url,
        type: "POST",
        xhr: function() {  
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // Check if upload property exists
                myXhr.upload.addEventListener("progress",function(e) {
                    if(e.lengthComputable){
                        $("#"+progress).attr({value:e.loaded,max:e.total});
                    }
                }, false); 
            }
            return myXhr;
        },

        success: success,
        error: error,
        data: formData,
        contentType: false,
        processData: false
    });

});

为了完成，示例HTML如下所示（所有三个上载“小部件”都遵循相同的模式）：


插曲（MP3）
试试这个：

    var formData = new FormData($(this).closest("form")[0]);

这将获取包含您单击的上载按钮的表单的formData，而不是文档中的第一个表单。这假定每个文件都有一个单独的表单

如果它们都在同一个表单中，但您不想提交整个表单，则必须手动构建
formData
对象，如中所述

不幸的是，这似乎不起作用。无论我点击哪个上传，第一个是唯一被加载的。但可能是我首先选择的三个中的任何一个。一个有效，另两个失败。它们的形式不同吗？这就是我的答案。不，对不起，它们都是同一种形式的一部分。我应该说明的是——道歉。
    var formData = new FormData($(this).closest("form")[0]);

var formData = new FormData();
var fileElement = $(this).prev()[0];
formData.append(fileElement.name, fileElement);