Ограничить выбор загрузки файлов конкретными типами

В любом случае, чтобы ограничить выбор типов файлов с помощью элемента <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.