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

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

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

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


html file-upload fileapi
person ndmweb    schedule 27.09.2011    source источник

Ответы (2)


arrow_upward
64
arrow_downward

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

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

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

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

person amosrivera    schedule 27.09.2011
comment
Согласно w3schools the accept attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari 6. Номера версий Firefox, Opera или Chrome не указаны. - person Petr Peller; 21.07.2013

arrow_upward
8
arrow_downward

Лучше позволить пользователю выбрать любой файл, а затем проверить его тип - это лучше поддерживается браузерами:

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.

person Radek Pech    schedule 11.10.2013
comment
Вопрос был в том, как это сделать, а не в том, считаете ли вы, что это хороший способ продолжить. - person Moonchild; 20.10.2016