HTML5 AJAX多文件上傳

我碰到這個純JS AJAX上傳代碼來了（似乎jQuery的$.post不與HTML5工作，出於某種原因），HTML5 AJAX多文件上傳

/* 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僅適用於單個文件上傳，我怎樣才能更改它爲多個文件上傳？

來源

2011-08-21 laukok

這行代表什麼意思後的對象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等

來源

2011-08-21 15:00:17 BalusC

感謝您的回答！我可以問一下 - 'files.length'它是從哪裏得到的？我應該在這個'for（）'之前設置什麼，以便我可以執行'files.length'？謝謝！ – laukok

當我使用for（）的答案時，出現'files is not defined'這個錯誤... – laukok

呃，只要從用戶指定了多個文件的地方得到它？ – BalusC

HTML5 AJAX多文件上傳

回答

相關問題