2

我有一个表单，其中需要通过三个单独的文件输入进行三个文件上传。使用 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 如下（所有三个上传“小部件”都遵循相同的模式）：

<div class="form-box">
    <label for="A">Episode (MP3)</label>
    <progress max="100" value="0" id="progressA"></progress>
    <input type="file" name="a" value="a" id="a">
    <input type="button" value="Upload" id="uploadA" name="uploadA">
</div>
4

1 回答 1

0

尝试这个：

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

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

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

var formData = new FormData();
var fileElement = $(this).prev()[0];
formData.append(fileElement.name, fileElement);
于 2013-11-12T10:50:18.947 回答