Поле ввода файла HTML с ограниченными типами файлов?

Question

Если у меня есть поле ввода файла HTML, могу ли я ограничить его разрешением только загрузки изображений? Я уверен, что это было бы возможно с Flash или Java, но я стараюсь держаться от них подальше.

Я нашел атрибут «принять» в Интернете, но он, похоже, ничего не делает для меня (или я использую его неправильно). Любая помощь или примеры приветствуются.

Answer 1

Лучший способ - справиться с этим в бэкэнде. В зависимости от типа типов, которые вы хотите разрешить, и технологии бэкэнда, вы найдете различные способы сделать это.

Вы также можете сделать это в javascript, но вы будете более ограничены, и это может привести к возникновению проблем:

if((document.form1.upload.value.lastIndexOf(".jpg")==-1) {
   alert("Please upload only .jpg extention file");
   return false;
}

( с помощью )

Если вы используете jquery, закажите этот вопрос: Как сделать так, чтобы jQuery ограничивал типы файлов при загрузке?

Вы также можете использовать плагин JQuery Validation.

$("#myform").validate({
  rules: {
    field: {
      required: true,
      accept: "xls|csv"
    }
  }
});

( с помощью * +1018 *)

Answer 2

Согласно этот ответ (цитата):

Атрибут Принять был введен в RFC 1867 , намереваясь включить фильтрация файлов по типу MIME для контроля выбора файла. Но большинство, если не все, браузеры не используют атрибут this.

Я предполагаю, что вам все равно придется иметь дело с "неправильными" файлами в вашем скрипте на сервере ... даже если вы найдете какой-то способ проверки Javascript (возможно, - смотрите другие ответы), всегда нужно будет проверять данные на сервере, так как JS можно отключить, а формы отправки подделаны ...

Answer 3

Если вы используете jQuery, взгляните на этот плагин - https://github.com/ajaxray/bootstrap-file-field

Используя этот крошечный плагин, вы можете установить различные ограничения, включая тип файла, используя простые атрибуты данных или настройки JS.
e, g, data-file-types="image/jpeg,image/png" ограничит выбор типов файлов, кроме изображений jpg и png.
Кстати, отобразит поле ввода файла в качестве кнопки начальной загрузки и прекрасно покажет выбранные имена файлов (или ошибки выбора).

Answer 4

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

Answer 5

Ну, вы можете сделать это с помощью Javascript, на самом деле, если вы используете jQuery, почти все плагины для загрузки файлов могут опционально обрабатывать ограничение типа файла. Только HTML этого не сделает.

Но только фильтрация на стороне клиента не означает, что файлы любого типа не могут быть загружены на ваш сервер. На самом деле злоумышленник может загрузить любой тип файла, потому что избежать «щита» Javascript просто. Вы всегда должны выполнять проверку на стороне сервера.

Answer 6

Используя javascript, вы можете сделать это, проверив, что было изменено в текстовом поле имени файла или на кнопке отправки, которая может быть использована.

На этом сайте есть пример этого: http://www.codestore.net/store.nsf/unid/DOMM-4Q8H9E

Если вы действительно осторожны, вы должны также проверить на бэкэнде, поскольку я мог бы поставить .jpg в конец любого файла, и он прошел бы проверку javascript.

Answer 7

Нет способа ограничить типы x-browser.