附加多個文件jquery

Question

如何上傳多個圖片，我在輸入區域包含了multiple。 上傳第二張圖像時，第一張附件被刪除。

<input name="images_post[]" id="files_post" size="27" type="file" multiple /> 

。

<input name="typeattach" type="hidden" id="typeattach" value="0"></span> 

JQ

  $('#files_post').click(function() {      
       $('#typeattach').val('1'); 
       $('#atach-value').val(''); 
      }); 

      $(':file').change(function() { 
       $('#num-files').text(this.files.length); 
      }); 

HTML

<span id="num-files">0</span> 

當第一個文件連接，我連着第二個文件..第一個文件突然失蹤。

Answer 1

要讓input接受多個文件，表單的編碼類型必須爲multipart/form-data。然後你可以選擇多個文件。

<!-- IMPORTANT: FORM's enctype must be "multipart/form-data" --> 
<form method="post" action="upload-page.php" enctype="multipart/form-data"> 
    <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" /> 
</form> 

<ul id="fileList"></ul> 

這裏有一個腳本來測試那些處理多個文件：

var input = document.getElementById('filesToUpload'); 
var list = document.getElementById('fileList'); 

// Clears the file list if it currently has child nodes. 
while (list.hasChildNodes()) { 
    list.removeChild(ul.firstChild); 
} 

// For each file... 
for (var x = 0; x < input.files.length; x++) { 
    // ...Add it to the ul as a li element. 
    var li = document.createElement('li'); 

    li.innerHTML = 'File ' + (x + 1) + ': ' + input.files[x].name; 
    list.append(li); 
} 

只是爲了保持完整性，即使答案是已經接受...

如果你想使它可以多次打開文件選擇提示，然後可以選擇多個文件，然後你必須有點冒險。我相信（不要引用我，但是）由於安全性，您不能從多個文件提示中選擇文件。如果你想第一次提示後維持上載的文件列表，那麼我們就必須：

• 隱藏通過一次文件的選擇已經做出的選擇隱藏input當前選定的文件，
• 重新創建當前連續上傳的input，
• 以其他方式顯示文件的累積列表，
• 提交表單後，上傳所有隱藏的輸入。

喜歡的東西：

// Handles immediately after a file is selected 
$("input#files_post").change(function() { 
    var inputClone = this.clone(); 

    // Add to (hidden) list. 
    inputClone.appendTo("#file-catalog"); 

    // Reset element 
    this.remove(); 
    inputClone.appendTo("#file-upload-form"); 
}); 

// Handles what is uploaded on form submission 
$("file-upload-form").submit({ 
    // Get only the file-catalog elements, serialise for upload. 
    var fileParams = $("#file-catalog").find("*:form").serialize(); 

    $.ajax({ 
     url: 'http://dot.com/', 
     type: 'POST', 
     data: params, 
     success: function (data) { 
      console.log("Success! Info: " + data); 
     } 
    }); 
}); 

爲HTML：

<form id="file-upload-form"> 
    <input name="images_post[]" id="files_post" size="27" type="file" multiple /> 
    <div id="file-catalog" display="none"></div> 
</div> 

，並利用原來的答案的JS，有幾個版本，我會離開你，如果你希望列出隱藏的文件。也許有一個清晰的所有按鈕將對該列表有好處：

$(".clear-button").click(function() { 
    $("#the-list-you-made-on-the-advice-above").empty(); 
    $("#file-catalog").empty(); 
}