Ограничить выбор загрузки файлов конкретными типами
В любом случае, чтобы ограничить выбор типов файлов с помощью элемента <input type="file" />
?
Например, если бы я хотел, чтобы были загружены только типы изображений, я бы ограничил возможные варианты (image/jpg, image/gif, image/png), и в диалоговом окне выбора были бы серые файлы из других типов mime.
p.s. Я знаю, что могу сделать это после факта с помощью API файлов, сканируя атрибуты .type. Я действительно пытаюсь ограничить это раньше. Я также знаю, что могу сделать это с помощью flash, но я НЕ хочу использовать flash для этого.
Ответы
Ответ 1
Атрибут html для этой конкретной цели называется accept
, но у него мало поддержки в браузерах. Из-за этой проверки на стороне сервера рекомендуется вместо этого.
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
Если у вас нет доступа к бэкэнд, посмотрите на решение на основе флэш-памяти, например SWFUpload.
Подробнее об этом здесь: Атрибут ввода "accept" - полезен ли он?
Ответ 2
Лучше разрешить пользователю выбирать любой файл, а затем проверять его тип - это лучше поддерживается браузерами:
var
file = (el[0].files ? el[0].files[0] : el[0].value || undefined),
supportedFormats = ['image/jpg','image/gif','image/png'];
if (file && file.type) {
if (0 > supportedFormats.indexOf(file.type)) {
alert('unsupported format');
}
else {
upload();
}
}
Вы также можете проверить размер файла, используя свойство file.size.