Question

我遇到了这个简单的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);

但我在这里有两个问题，

此行在对象FormData之后的含义是什么？

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

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

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

Answer 1

对象FormData后该行的含义是什么？
fd.append("file", document.getElementById('file').files[0]);

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

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

不需要ID。毕竟这只是一个例子，以便能够通过其ID从文档中获取<input type="file">。请注意，此示例中的append()函数是the 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等提供。

HTML5 AJAX多个文件上传

1 个答案: