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

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

我想从中创建一个FormData对象。

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

 myFormData.append(name,file,filename); 

HTML

 
   click  

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/

Answer 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）中，您将在检查标题时看到添加的文件。

Answer 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);