Как выбрать несколько файлов с помощью <input type="file">
?
Как выбрать несколько файлов с помощью <input type="file">?
Ответ 1
Новый ответ:
В HTML5 вы можете добавить атрибут multiple
, чтобы выбрать более одного файла.
<input type="file" name="filefield" multiple="multiple">
Старый ответ:
Вы можете выбрать только 1 файл за
<input type="file" />
. Если ты хочешь отправьте несколько файлов, вам придется использовать несколько тегов ввода или использовать Flash или Silverlight.
Ответ 2
Существует также HTML5 <input type="file" multiple />
, но я не знаю, насколько широко он поддерживается.
Ответ 3
Все это должно выглядеть так:
<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>
, или вы не можете читать файлы на стороне сервера после отправки!
Ответ 4
Этот плагин jQuery (jQuery File Upload Demo) делает это без флэш-памяти в форме, использующей:
<input type='file' name='files[]' multiple />
Ответ 5
Теперь вы можете сделать это с помощью HTML5
В основном вы используете множественный атрибут для ввода файла.
<input type='file' multiple>
Ответ 6
HTML5 предоставил новый атрибут multiple для элемента ввода, атрибут type которого является файлом. Таким образом, вы можете выбрать несколько файлов, а IE9 и предыдущие версии не поддерживают это.
ПРИМЕЧАНИЕ. Будьте осторожны с именем входного элемента. если вы хотите загрузить несколько файлов, вы должны использовать массив, а не строку, как значение атрибут name.
ex: input type="file" name= "myPhotos []" multiple = "multiple"
и если вы используете php, вы получите данные в $_FILES и используйте var_dump ($ _ FILES) и посмотрите вывод и выполните обработку Теперь вы можете перебирать и выполнять остальные
Ответ 7
<form action="" method="post" enctype="multipart/form-data">
<input type="file" multiple name="img[]"/>
<input type="submit">
</form>
<?php
print_r($_FILES['img']['name']);
?>
Ответ 8
Скопируйте и вставьте это в свой 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/
Ответ 9
Это легко...
<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());
};