如何用<input type="file">
選擇多個文件?如何用<input type =「file」>選擇多個文件?
回答
新的答案:
在HTML5中,你可以添加multiple
屬性選擇超過1個文件。
<input type="file" name="filefield" multiple="multiple">
老答案:
只能選擇每
<input type="file" />
1個文件。如果你想 發送多個文件,你將不得不使用多個輸入標籤或使用Flash或Silverlight的 。
還有HTML5 <input type="file" multiple />
但我不知道它有多廣泛的支持。
不支持在IE9和之前:( – 2012-11-09 10:40:12
這個jQuery插件(jQuery File Upload Demo),難道沒有閃光燈,在形式它的使用:
<input type='file' name='files[]' multiple />
也不支持IE9-,https:/ /github.com/blueimp/jQuery-File-Upload/wiki/Browser-support#multiple-file-selection – JerryDDG 2014-11-26 10:44:58
整個事情應該是這樣的:
<form enctype='multipart/form-data' method='POST' action='submitFormTo.php'>
<input type='file' name='files[]' multiple />
<button type='submit'>Submit</button>
</form>
請確保您有在enctype='multipart/form-data'
屬性您的<form>
標記,或者在提交後無法讀取服務器端的文件!
HTML5爲類型屬性爲文件的輸入元素提供了新的屬性倍數。 所以你可以選擇多個文件,IE9和以前的版本不支持這個。
注意:請小心輸入元素的名稱。 當你想要上傳多個文件時,你應該使用數組而不是字符串作爲 名稱屬性的值。
例如:輸入類型= 「文件」 NAME = 「myPhotos []」 多個= 「多」
,如果你正在使用PHP,那麼你將獲得$ _FILES數據和 用var_dump($ _ FILES ),看看輸出並做處理 現在,您可以遍歷和做其他
<form action="" method="post" enctype="multipart/form-data">
<input type="file" multiple name="img[]"/>
<input type="submit">
</form>
<?php
print_r($_FILES['img']['name']);
?>
複製並粘貼到您的HTML:
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
通過我這個網頁找到你:http://www.html5rocks.com/en/tutorials/file/dndfiles/
那很容易...
<input type='file' multiple>
$('#file').on('change',function(){
_readFileDataUrl(this,function(err,files){
if(err){return}
console.log(files)//contains base64 encoded string array holding the
image data
});
});
var _readFileDataUrl=function(input,callback){
var len=input.files.length,_files=[],res=[];
var readFile=function(filePos){
if(!filePos){
callback(false,res);
}else{
var reader=new FileReader();
reader.onload=function(e){
res.push(e.target.result);
readFile(_files.shift());
};
reader.readAsDataURL(filePos);
}
};
for(var x=0;x<len;x++){
_files.push(input.files[x]);
}
readFile(_files.shift());
};
這已經回答得很清楚了。什麼是需要添加一個javascript例? – RightHandedMonkey 2017-11-30 14:54:47
- 1. <input type =「file」multiple =「multiple」/>不允許選擇多個文件
- 2. 將刪除的文件添加到<input type =「file」多個>
- 3. 如何限制<input type =「file」>以便它只能選擇.pdf文件?
- 4. HTML <INPUT TYPE =「文件」>如何讓文件選擇
- 5. HTML <input type =「text」... as <input type =「file」
- 6. 如何在<input type =「text」>標籤內放置<input type =「file」>?
- 7. 不使用<input type =「file」/>
- 8. <input type =「file」>通過擴展限制可選文件
- 9. 如何隱藏<input type ='file'>中的文件位置?
- 10. HTML <INPUT TYPE = '文件'>文件選擇事件
- 11. <input type =「file」/>的幫助器
- 12. 通過打開<input type =「file」>
- 13. 回顧從<input type =「file」>
- 14. 問題與<input type =「file」>
- 15. 使用<input type =「file」時傳遞文件路徑>
- 16. 用<input type =「file」>讀取本地文件?
- 17. 文件瀏覽器控件替換<input type =「file」>
- 18. 如何在React中檢測<input type =「file」/>上的空選擇?
- 19. 如何從<input type =「file」>獲取UNC路徑>
- 20. 如何將excel文件從<input type =「file」>上傳到php服務器>
- 21. 從C#中的<input type =「file」>獲取文件.net
- 22. <input type =「file」>只讀文件名不全路徑
- 23. 如何在iPhone上的Safari中使用<input type ='file'>?
- 24. 如何在Javascript中使用FileList(來自<input type =「file」>)?
- 25. 如何使用Angular2驗證<input type =「file」>?
- 26. 如何使用jQuery選擇<input type =「text」>的值?
- 27. 使用jQuery提交一個<input type =「file」/> $ .post
- 28. 如何限制多個輸入上的最大項目(<input type =「file」multiple />)
- 29. 用於選擇多個文件的INPUT FILE HTML如Facebook或Google?
- 30. 如何在選擇文件後避免<input file>刪除值?
這是關於JavaScript和HTML – Mask 2009-10-20 08:47:26
你的意思上傳多個文件一氣呵成(當你選擇一次一個,然後點擊上傳)?或者你的意思是使用Ctrl +單擊在一個瀏覽器窗口中選擇幾個文件? – cletus 2009-10-20 09:04:54
您可以在輸入元素上使用多個屬性來使用HTML5。 這是一個很好的小提琴,它利用它:http://jsfiddle.net/0GiS0/Yvgc2/ – Costa 2013-07-05 22:34:22