Js как манипулировать объектом .files? (input type=file multiple)

#jquery #upload #html #javascript

Имеем элемент формы, который позволяет пользователю "зачерпнуть" файлы оптом, а не
кликать по одному. Подразумевается, что файлы сразу же отправляются на сервер, как
только они выбраны (ибо особого смысла не вижу формировать список, а потом ещё раз
сабмитить)




Однако, если мы хотим ограничить пользователя, например, порцией в 10 файлов (допустим,
чтобы не перегружать сервер, или если, скажем, у нас на сайте политика 10 файлов в
одни руки),  то здесь нас ждёт небольшое разочарование. Или большое. 

В HTML5 такая возможность не реализована (или я о ней не знаю). Мы можем указать
минимальное количество файлов (то есть - один минимум), а вот максимальное увы. 

Получить количество файлов не сложно. Но что потом с этим делать?

var collect = document.getElementById('input').files;
//или 
var collect = $("input").files;
// вернет объект
FileList : {
    0,
    1,
    2,
    length: 3,
    item
}


Варианты: 


выдать сообщение пользователю, что он превысил лимит порции и прервать загрузку; 
загрузить допустимую порцию и выдать сообщение, что загружена только часть файлов; 
создать остаток "на потом"; 
создать общий список,   предложив пользователю сформировать порцию;


Кроме этих терзаний мы имеем чисто технический вопрос: как "порезать" массив files?

Метод splice() он не понимает. delete collect.item(i) или  delete collect[i] на него
не действует, в null он превращаться не хочет. Создать ещё один инпут (или серию) и
"перекачать" в него лимитированное количество файлов мне тоже не удалось.

То есть, остаётся один вариант: грубо оборвать загрузку, вынудив пользователя заново
собирать коллекцию.
    

Ответы

Ответ 1

Посмотрите на JQuery File Upload, там эта проблема как-то решена. Правда, там расширяемость
ужасная (мне, к примеру, пришлось половину кода переписать просто чтобы "подружить"
с требованиями проекта) - но изучение их реализации точно не повредит.


Ответ 2

Просто сделайте чтобы каждый раз при добавлении файла в форме, появлялся новый input,
допустим до 10 раз так будет появлятся, после этого выдаётся alert('Максимальное количество
файлов 10'), если-же multiple, так-же в jquery проверяем length и если больше 10 делаем
e.preventDefault(); с сообщением о том что слишком много файлов


Ответ 3

Подписываемся на событие change и проверяем длину коллекции. Если не устраивает,
блокируем отправку формы.

Ну либо отправляем файлы ajax'ом - тогда и количество контролировать можем.