230 Очень часто пользователям необходимо за раз выгрузить много файлов. Если использовать при этом некоторое множество элементов INPUT, то это будет раздражать, потому что, это и медленно и неэффективно. И мы понимаем это, а также представляем, как это исправить.
К счастью, Safari, Chrome, Firefox и внедрили метод, посредством которого пользователи могут загружать сразу несколько файлов в один элемент INPUT.
HTML
|
1 2 3 4 |
<!-- 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> |
Просто добавьте атрибут, позволяющий выгружать множество файлов через один элемент INPUT. Если вы любите валидацию, то не забудьте про множественные значения элемента.
Чтение множества файлов на JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//get the input and UL list var input = document.getElementById('filesToUpload'); var list = document.getElementById('fileList'); //empty list for now... while (list.hasChildNodes()) { list.removeChild(ul.firstChild); } //for every file... for (var x = 0; x < input.files.length; x++) { //add to list var li = document.createElement('li'); li.innerHTML = 'File ' + (x + 1) + ': ' + input.files[x].name; list.append(li); } |
Свойство input.files поддерживает массив файлов, в котором вы можете счесть длину. Если что-то есть, то можете запустить цикл проверки каждого файла на пути и имена.
Прием и обработка файлов с помощью PHP
|
1 2 3 4 5 6 7 8 |
if(count($_FILES['uploads']['filesToUpload'])) { foreach ($_FILES['uploads']['filesToUpload'] as $file) { //do your upload stuff here echo $file; } } |
PHP создает массив залитых файлов с именем элемента INPUT. Эта переменная всегда является массивом в PHP.
Конечно же, для бразуеров Internet Explorer и Opera, можно использовать элементы выгрузки, написанные на Flash, но это и трудоемко. Надеемся, что разработчики скоро исправят данную недоработку.
