用於選擇多個文件的INPUT FILE HTML如Facebook或Google？

Question

如何選擇多個文件上傳，如Facebook或Gmail或Flickr？

<button>Upload files</button> 

當您按下上傳文件按鈕，將出現OpenDialogBox，您使用Ctrl鍵選擇多個文件...然後按開放和上傳開始...

謝謝！

Answer 1

右鍵單擊gmail中的附加鏈接，你會看到你的邪惡朋友閃光。

Answer 2

本示例在您提交表單之前不會開始上傳，但如果您只是想用一種表單提交（使用jQuery）上傳多個文件，我會將其混淆。

如果您正在尋找Flash腳本（預先警告，Flash不處理會話變量），我已經使用「uploadify」，並取得了良好的效果。

我喜歡用jQuery clone()函數。它使事情變得簡單。

這在您的形式：

<div id="Uploadcontainer"> 
    <input type="file" name="uploadfiles[]" class="uploadfile" /> 
</div> 
<a id="extraUpload" href="#">Add another field</a> 

這對jQuery的：

/********************** 
    FILE UPLOAD 
***********************/  
$(document).ready(function(){ 
     $("#extraUpload").click(function() { 
     $('.uploadfile:last').clone().appendTo('#Uploadcontainer').val("");  
     return false; 
    }); 
    }); 

當點擊id爲extraUpload（#extraUpload）的鏈接，在文檔對象模型中最後一個元素（DOM或「html頁面」上的最後一個元素）與uploadfile（.uploadfile:last）的類別一起被複製爲clone() ...並被添加到div #Uploadcontainer的末尾appendTo() ...然後，使用沒有任何價值的val()將添加的輸入字段的值設爲空白。