HTML5 AJAX多个文件上传

我遇到了这个简单的js ajax上传代码（似乎jquery $.post由于某些原因不适用于HTML5），

  /* If you want to upload only a file along with arbitary data that is not in the form, use this */ var fd = new FormData(); fd.append("file", document.getElementById('file').files[0]); /* If you want to simply post the entire form, use this */ //var fd = document.getElementById('form1').getFormData(); var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", uploadFailed, false); xhr.addEventListener("abort", uploadCanceled, false); xhr.open("POST", "Upload.php"); xhr.send(fd); 

但我这里有两个问题，

1. 在FormData对象之后这行是什么意思？

fd.append("file", document.getElementById('file').files[0]);

为什么我需要ID？ 我可以用$('input[type=file]')使用jquery append() $('input[type=file]')吗？

1. 这个ajax仅用于单个文件上传，如何更改多个文件上传？

Answer 1

在FormData对象之后这行是什么意思？

 fd.append("file", document.getElementById('file').files[0]); 

document.getElementById('file')通过其ID获取元素。 element.files[0]从元素中获取第一个选定的文件。 fd.append("file", file)将其附加到FormData实例，其字段名称为file 。 稍后将fd作为multipart/form-data XHR请求体发送。

---

为什么我需要ID？ 我可以用$('input[type=file]')使用jquery append() $('input[type=file]')吗？

该ID不是必需的。 毕竟这只是一个例子，以便能够通过其ID从文档中获取 。 请注意，此示例中的append()函数是FormData API的一部分，不要与jQuery的append()函数混淆。 另请注意， append()的第一个参数表示字段名称，而不是ID。 他们是一样的只是巧合。

---

这个ajax仅用于单个文件上传，如何更改多个文件上传？

只需将多个字段附加到FormData 。 假设你有一个File[] ，这是一个例子：

 for (var i = 0; i < files.length; i++) { fd.append("file" + i, files[i]); } 

它将在服务器端由字段名file0 ， file1等提供。