HTML5 AJAX多个文件上传

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

但我这里有两个问题,

1. 这条线在物体后意味着FormData什么？

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

为什么我需要ID？我能做些什么使用jQuery append() 用$('input[type=file]')？

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

Answer 1

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

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

在document.getElementById('file')得到<input type="file" id="file">由它的ID元件.所述element.files[0]从所述元件中的第一选择的文件争夺.将fd.append("file", file)其追加到FormData与字段名的实例file.在fd稍后要被发送作为multipart/form-dataXHR请求体.

为什么我需要ID？我能做些什么使用jQuery append()用$('input[type=file]')？

该ID不是必需的.毕竟这只是一个例子,以便能够<input type="file">通过其ID从文档中获取.需要注意的是,append()在这个例子中的功能是一部分的FormDataAPI,而不是与jQuery的混淆append()功能.另请注意,第一个参数append()表示字段名称,而不是ID.他们是一样的只是巧合.

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

只需追加多个字段即可FormData.假设你有一个File[],这是一个例子:

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

它会通过字段名是在服务器端可用file0,file1等等.