jQuery從頭開始上傳多個文件

Question

我正在嘗試使用新的HTML5 Multiple屬性在jQuery中實現多圖片上傳器 。

我的代碼如下：

<form action="file-upload.php" method="post" enctype="multipart/form-data">
    <input name="userfiles" type="file" multiple="multiple">
</form>

我正在使用的JS代碼來自SO的討論，內容如下：

 $('input[name=userfiles]').change(function() {
    var names = [];
    for (var i = 0; i < $(this).get(0).files.length; ++i) {
        names.push($(this).get(0).files[i].name);
        console.log(names[i]);
    }
 });

這樣我可以在控制台上打印我選擇的文件名，但是如果我需要獲取這些文件的確切val（）怎么辦？ 我嘗試用.val（）替換.name ，但是出現錯誤。

我想如果我希望能夠使用$ .ajax與每個文件一起使用，則每個文件都需要一個falsepath 。 如果這是正確的，我如何在發送get請求的PHP文件中循環它們以上傳它們？

Answer 1

您可以使用HTML5 FormData API。 https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects

var form = new FormData();
for (var i = 0; i < $(this).get(0).files.length; ++i) {
    form.append('userfiles[]', $(this).get(0).files[i]);
}

// send form data with ajax
$.ajax({
    url: 'url',
    type: "POST",
    data: form
});

或者，如果您不能使用FormData，則可以采用一種本地發送的方式： https : //developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files

Answer 2

您無需操縱文件路徑，在ajax調用中，只需使用File並將其放入新的FormData中

像這樣：

 $.ajax({
'type':'POST',
'data': (new FormData()).append('file', $(this).get(0).files[i])

請參閱HTML5多個文件上傳：通過AJAX一對一上傳

Answer 3

如果您使用jquery-file-upload插件，則可以使用此插件

<input class="fileupload" type="file" name="file">

和

$('.fileupload').each(function () {
  $(this).fileupload({
  //your code goes here
})