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

Question

В любом случае ограничить выбор типов файлов с помощью элемента <input type="file" />?

Например, если бы я хотел, чтобы загружались только типы изображений, я бы ограничил возможные варианты выбора (image / jpg, image / gif, image / png), а диалог выбора выделил бы файлы других типов пантомимы.

p.s. Я знаю, что могу сделать это после факта с помощью File API путем сканирования атрибутов .type. Я действительно пытаюсь ограничить это заранее ... Я также знаю, что могу сделать это через flash, но я НЕ хочу использовать для этого flash.

Answer 1

Для этой конкретной цели есть атрибут html, называемый accept, но он мало поддерживается во всех браузерах. Из-за этого рекомендуется проверка на стороне сервера.

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

Если у вас нет доступа к бэкэнду, взгляните на решение на основе флэш-памяти, такое как SWFUpload .

Подробнее об этом здесь: Атрибут ввода файла 'accept' - это полезно?

Answer 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.