HTML5 AJAX多个文件上传

一尘不染

HTML5 AJAX多个文件上传

ajax

我遇到了这个简单的js ajax上传代码（$.post由于某种原因，jquery 似乎不适用于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仅用于单个文件上传，如何更改多个文件上传？

阅读 230

2020-07-26

共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等等。

2020-07-26