如何使用 $.each 将多个文件输入附加到 FormData 对象？

Posted 2023-03-16

【中文标题】如何使用 $.each 将多个文件输入附加到 FormData 对象？

【英文标题】：How to append multiple file inputs to a FormData object using $.each?

【发布时间】：2014-03-21 00:36:41

【问题描述】：

我有多个（和动态的）type=file 输入。

我想用它们创建一个 FormData 对象。

我需要手动将它们附加到对象，因为我需要访问它们的文件名以插入数据库，因此需要指定文件名是这种格式：

myFormData.append(name,file,filename);

HTML

<form id="my_form" enctype="multipart/form-data">
    <input type="file" name="undefined" id="file_1" data-filename="image.jpg">
    <input type="file" name="undefined" id="file_2" data-filename="image2.jpg">
    <button>click</button>
</form>

jQuery

var myFormData = new FormData();

$(document).on("click", "button", function(e) 
    e.preventDefault();
    var inputs = $("#my_form input");
    $.each(inputs,function(obj,v) 
        var file = v.files[0];
        var filename = $(v).attr("data-filename");
        var name = $(v).attr("id");
        myFormData.append(name, file, filename);
    );

    //alert(JSON.stringify(myFormData));
    console.log(myFormData);
);  

我认为对象构造不正确，并且我无法正确查看对象的内容来确认这一点。

这是我在控制台中得到的：

jsFiddle

http://jsfiddle.net/rwone/K7aMw/

【参考方案1】：

没有很好的方法来查看 FormData 的内容。一个技巧是发送它（POST）并查看网络状态。

示例：http://jsfiddle.net/K7aMw/2/

$(document).on("click", "button", function (e) 
    e.preventDefault();
    var inputs = $("#my_form input");
    $.each(inputs, function (obj, v) 
        var file = v.files[0];
        var filename = $(v).attr("data-filename");
        var name = $(v).attr("id");
        myFormData.append(name, file, filename);
    );
    var xhr = new XMLHttpRequest;
    xhr.open('POST', '/echo/html/', true);
    xhr.send(myFormData);
);

然后在“网络”选项卡 (F12) 中，您将在检查标头时看到添加的文件。

【讨论】：

如何在 nodejs 中使用 formdata 为每个文件迭代获取 name 值，即“file_1”和“file_2”？

我用它来查看表单数据的内容 for (var pair of formData.entries()) console.log(pair[0] + ', ' + pair[1]);

如果您有多个同名元素，请使用类而不是 id。

【参考方案2】：

//your files should be doing something here
var files = yourfileInput[type = file].files

//will upload
var formData = new FormData();
//other info request takes
formData.append("otherInfoKey", $("#otherInfoID").val())
//Now turn to files
for (var i = 0; i < files.length; i++) 
    formData.append(files[i].name, files[i])


//Request
var xhr = new XMLHttpRequest();
xhr.open("post", "/upload", true);
xhr.upload.onprogress = function(ev) 
    var percent = 0;
    if (ev.lengthComputable) 
       percent = 100 * ev.loaded / ev.total;
       //$("#yourprogress").width(percent + "%");
       //or something like progress tip
    

xhr.onloadend = function(e) 
    if (!/^2\d*$/.test(this.status)) 
         alert(this.responseText)
    

xhr.onload = function(oEvent) 
    if (xhr.status == 200) 
        //go on
    

xhr.send(formData);