HTML5 AJAX多个文件上传 [英] HTML5 AJAX Multiple Files Upload

问题描述

我碰到这个简单的JS AJAX上传code（似乎jQuery的 $。交不与HTML5的工作，出于某种原因），

  / *如果你想上传随着arbitary数据只有一个文件
       未在形式，使用本* /
    变种FD =新FORMDATA（）;
    fd.append（文件的document.getElementById（文件）的文件[0]）;

    / *如果你想简单地张贴整个表单，使用* /
    //变种FD =的document.getElementById（'窗口1）getFormData（）。

    VAR XHR =新XMLHtt prequest（）;
    xhr.upload.addEventListener（进步，上传进度，假）;
    xhr.addEventListener（加载，uploadComplete，假）;
    xhr.addEventListener（错误，uploadFailed，假）;
    xhr.addEventListener（中止，uploadCanceled，假）;
    xhr.open（POST，upload.php的）;
    xhr.send（FD）;
 

不过，我有两个问题，

1. 什么是对象之后，这条线是指 FORMDATA ？

fd.append（文件的document.getElementById（文件）的文件[0]）;

为什么需要一个ID呢？我可以做一些使用jQuery 追加（）与 $（'输入[type = file]'）？

1. 在这AJAX是仅适用于单文件上传，我能怎样改变多个文件上传？

解决方案

  

对象之后，这是什么意思行FORMDATA？

  fd.append（文件的document.getElementById（文件）的文件[0]）;
 

在的document.getElementById（'文件'）得到＆LT;输入类型=文件ID =文件＆GT; 通过ID元素。该 element.files [0] 抓住从元素的第一个选定的文件。该 fd.append（文件，文件）追加到一个 FORMDATA 实例与<$的字段名C $ C>文件。该 FD 稍后发送的的multipart / form-data的 XHR请求主体。

---

  

为什么需要一个ID呢？我可以做一些使用jQuery 追加（）与 $（'输入[type = file]'）？

ID是没有必要的。这毕竟只是一个例子，为了能够获得＆LT;输入类型=文件＆GT; 从它的ID文件。需要注意的是在本实施例的追加（）功能是的 FORMDATA API 并没有能与jQuery的追加（）功能。还要注意的是的第一个参数追加（）重presents字段名称，而不是ID。它们是相同的仅仅是一个巧合。

---

  

这AJAX是仅适用于单文件上传，我能怎样改变多个文件上传？的

只是附加多个领域 FORMDATA 。假设你有一个文件[] ，这里有一个例子：

 的（VAR I = 0; I＆LT; files.length;我++）{
    fd.append（文件+ I，文件[I]）;
}
 

这将在由字段名称 file0 ，文件1 等服务器端提供。

I came across this plain js ajax upload code (it seems that jquery $.post does not work with HTML5 for some reason),

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

But I have two issues here,

1. what does this line mean after the object FormData?

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

Why do I need an ID there? Can I do something use jquery append() with $('input[type=file]')?

1. This ajax is only for single file upload, how can I change it for multiple files upload?

解决方案

what does this line mean after the object FormData?

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

The document.getElementById('file') gets the <input type="file" id="file"> element by its ID. The element.files[0] grabs the first selected file from the element. The fd.append("file", file) appends it to an FormData instance with the field name of file. The fd is later to be sent as multipart/form-data XHR request body.

---

Why do I need an ID there? Can I do something use jquery append() with $('input[type=file]')?

The ID is not necessary. It's after all just an example in order to be able to get the <input type="file"> from the document by its ID. Note that the append() function in this example is part of the FormData API and is not to be confused with jQuery's append() function. Also note that the 1st argument of append() represents the field name, not the ID. That they are the same is just a coincidence.

---

This ajax is only for single file upload, how can I change it for multiple files upload?

Just append multiple fields to FormData. Assuming that you have a File[], here's an example:

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

It'll be available in the server end by the field names file0, file1, etc.

这篇关于HTML5 AJAX多个文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！