Ограничить формат файла при использовании ?

Я хотел бы ограничить тип файла, который может быть выбран из встроенного средства выбора файлов ОС, когда пользователь нажимает кнопку «Обзор» в элемент в HTML. У меня такое чувство, что это невозможно, но я хотел бы знать, есть ли решением. Я хотел бы придерживаться исключительно HTML и JavaScript; Не используйте Flash, пожалуйста.


Строго говоря, ответ — нет . Разработчик не может запретить пользователю загружать файлы любого типа или расширения.

Но все же атрибут accept для может помочь предоставить фильтр в диалоговом окне выбора файла ОС. Например,

     

должен обеспечивать способ фильтрации файлов, отличных от .xls или .xlsx. Хотя на странице MDN для элемента input всегда говорилось, что он поддерживает это, к моему удивлению, это не работало для меня в Firefox до версии 42. Это работает в IE 10+, Edge и Chrome.

Итак, для поддержки Firefox старше 42 вместе с IE 10+, Edge, Chrome и Opera, я думаю, лучше использовать список MIME-типов, разделенных запятыми:

    

Поведение [ Edge (EdgeHTML): раскрывающееся меню фильтра типов файлов показывает типы файлов, упомянутые здесь, но не является значением по умолчанию в раскрывающемся списке. Фильтр по умолчанию: Все файлы (*) .]

Вы также можете использовать звездочки в MIME-типах. Например:

        

W3C рекомендует авторам указывать оба MIME-типы и соответствующие расширения в атрибуте accept . Итак, лучший подход:

     

JSFiddle того же: здесь.

Ссылка: Список MIME-типов

ВАЖНО: Использование атрибута accept обеспечивает только способ фильтрации в файлах тех типов, которые представляют интерес. Браузеры по-прежнему позволяют пользователям выбирать файлы любого типа. Должны быть выполнены дополнительные (на стороне клиента) проверки (с использованием JavaScript, одним из способов было бы это), и, безусловно, типы файлов ДОЛЖНЫ быть проверены на сервере , с использованием комбинации MIME-типа с использованием как расширения файла, так и его двоичной подписи (ASP.NET, PHP, Ruby, Java). Вы также можете обратиться к этим таблицам, чтобы узнать о типах файлов и их магических числах, чтобы выполнить более надежную проверку на стороне сервера.

Вот три хороших чтения по загрузке файлов и безопасности.

EDIT: Возможно, проверка типа файла с использованием его двоичной подписи также может быть выполнена на стороне клиента с помощью JavaScript (а не просто просмотра расширения) с использованием HTML5 File API , но все же файл должен быть проверен на сервере, потому что злоумышленник по-прежнему сможет загружать файлы, сделав собственный HTTP-запрос.


Для входного тега есть атрибут accept. Тем не менее, это ненадежно в любом случае. Браузеры, скорее всего, рассматривают это как «предложение», то есть пользователь, в зависимости от файлового менеджера, также будет иметь предварительный выбор, который отображает только желаемые типы. Они по-прежнему могут выбрать «все файлы» и загрузить любой файл, который захотят.

Например:

     

Подробнее читайте в спецификации HTML5

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

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

В качестве альтернативы или дополнительно вы можете сделать что-то подобное, проверив имя файла (значение поля ввода) с помощью JavaScript, но это ерунда, потому что это не обеспечивает защиты, а также не облегчает выбор для Пользователь. Это только потенциально может обмануть веб-мастера, заставив его думать, что он/она защищен, и открыть брешь в безопасности. Это может быть головной болью для пользователей, у которых есть альтернативные расширения файлов (например, jpeg вместо jpg), прописные буквы или вообще без расширений файлов (как это часто бывает в системах Linux).

2


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

  var file = document.getElementById ('someId'); file.onchange = function (e) {var ext = this.value.  совпадение (/. ([^ .] +) $/) [1];  switch (ext) {case 'jpg': case 'bmp': case 'png': case 'tif': alert ('Разрешено');  перемена;  по умолчанию: alert («Не разрешено»);  this.value = '';  }};  
    

JSFiddle

5


Да, ты прав. С HTML это невозможно. Пользователь сможет выбрать любой файл, который он хочет.

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

Что-то вроде:

  функция beforeSubmit () {var fname = document.getElementById ("ifile"). value; //проверяем, имеет ли fname желаемое расширение if (fname hasDesiredExtension) {return true;  } else {вернуть ложь;  }}  

HTML-код:

      

10


Технически вы можете указать атрибут accept (альтернатива в html5) в элементе input , но он не поддерживается должным образом.

2


Используйте тег input с атрибутом accept

    

Щелкните здесь, чтобы просмотреть последнюю таблицу совместимости браузеров

Живая демонстрация здесь

Чтобы выбрать только файлы изображений, вы можете использовать этот accept="image/*"

    

Живая демонстрация здесь

Будут показаны только gif, jpg и png, снимок экрана из Chrome версии 44

3


Я знаю, что это немного поздно.

  function Validatebodypanelbumper (theForm) {var regexp;  var extension = theForm.FileUpload.value.substr (theForm.FileUpload1.value.lastIndexOf ('.'));  if ((extension.toLowerCase ()! = ".gif") && (extension.toLowerCase ()! = ".jpg") && (extension! = "")) {alert ("Поле " FileUpload  "содержит  неутвержденное имя файла. ");  theForm.FileUpload1.focus ();  вернуть ложь;  } return true;}  


Вы действительно могли бы сделать это с javascript, но помните, что js — это клиентская сторона, поэтому вы фактически будете «предупреждать пользователей» о том, какие типы файлов они могут загружать, если вы хотите ИЗБЕГАТЬ (ограничивать или ограничивать, как вы сказали) определенные типы файлов, которые вы ДОЛЖНЫ делать на стороне сервера .

Посмотрите этот базовый урок, если вы хотите начать работу с проверкой на стороне сервера. Чтобы просмотреть весь учебник, посетите эту страницу.

Удачи!


Как упоминалось в предыдущих ответах, мы не можем ограничить пользователя выбором файлов только для заданных форматов файлов. Но действительно удобно использовать тег accept для атрибута файла в html.

Что касается проверки, мы должны делать это на стороне сервера. Мы также можем сделать это на стороне клиента в js, но это не надежное решение. Мы должны проверять на стороне сервера.

Для этих требований я действительно предпочитаю структуру разработки веб-приложений Java struts2. Благодаря встроенной функции загрузки файлов, загрузка файлов в веб-приложения на основе struts2 — это проще простого. Просто укажите форматы файлов, которые мы хотели бы принять в нашем приложении, а обо всем остальном позаботится ядро ​​самого фреймворка. Вы можете проверить это на официальном сайте struts.


Я могу предложить следующее:

  • Если вам нужно заставить пользователя выбирать любой из файлов изображений по умолчанию, используйте accept = «image /* «

  • , если вы хотите ограничиться определенными типами изображений, используйте accept = «image/bmp, image/jpeg, image/png»

  • , если вы хотите ограничить определенные типы, тогда используйте accept = «. bmp, .doc, .pdf»

  • Вы не можете запретить пользователю изменять файловый фильтр для всех файлов, поэтому всегда проверяйте тип файла в скрипте и на сервере

1


Вы можете использовать атрибут «accept» в качестве фильтра в поле выбора файла. Использование «accept» поможет вам отфильтровать входные файлы на основе их «суффикса» или «мем-типа».

1. Фильтр на основе суффикса: Здесь «accept» атрибут просто позволяет выбирать файлы с расширением .jpeg.

    

2. Фильтр на основе «тип файла». Здесь атрибут «accept» позволяет выбрать файл с типом «image/jpeg».

    

Важно: мы можем изменить или удалить расширение файла, не меняя тип мема. Например, можно иметь файл без расширения, но тип этого файла может быть «image/jpeg «. Таким образом, этот файл не может пройти фильтр accept = «. Jpeg». но он может передавать accept = «image/jpeg».

3. Мы можем использовать * для выбора любого типа файла. Например, приведенный ниже код позволяет выбирать все виды изображений. например «изображение/png» или «изображение/jpeg» или … Все они разрешены.

    

4 . Мы можем использовать cama (,) как оператор или в атрибуте select. Например, чтобы разрешить все виды изображений или файлов PDF, мы можем использовать этот код:

    



Атрибут HTML: принять

Атрибут accept принимает в качестве значения список единиц, разделенных запятыми. или несколько типов файлов, или уникальные спецификаторы типов файлов, описывающие, какие типы файлов разрешены. Свойство accept является атрибутом типа файла . Он поддерживался в элементе , но был удален в пользу файла в HTML5.

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

Например, существует несколько способов идентификации файлов Microsoft Word, поэтому сайт, который принимает файлы Word, может использовать , например:

 

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

  type = "file" id = "videoFile" accept = "video/*">  

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

Потому что из этого вы должны убедиться, что ожидаемое требование подтверждено на стороне сервера.

Примеры

При установке на ввод файла type, открывающееся собственное средство выбора файлов должно позволять выбирать только файлы правильного типа. Большинство операционных систем облегчают файлы, которые не соответствуют критериям и не могут быть выбраны.

  for = "soundFile"> Выберите аудиофайл: type  = "file" id = "soundFile" accept = "audio/*">> Выберите видеофайл:>> for = "imageFile"> Выберите несколько изображений: type = "file" id = "imageFile" accept = "image/ * "multiple> 

Обратите внимание, что последний пример позволяет выбрать несколько изображений. Дополнительную информацию см. В атрибуте multiple .

Уникальные спецификаторы типа файла

уникальный спецификатор типа файла — это строка, описывающая тип файла, который может быть выбран пользователем в элементе типа файл . Каждый уникальный спецификатор типа файла может принимать одну из следующих форм:

  • Допустимое расширение имени файла без учета регистра, начинающееся с символа точки («.»). Например: .jpg , .pdf или .doc .
  • A допустимая строка типа MIME без расширений.
  • Строка audio/* означает «любой аудиофайл».
  • Строка video/* означает «любой видеофайл».
  • Строка image/* означает «любой файл изображения».

Атрибут accept принимает в качестве значения строку, содержащую один или несколько из этих уникальных описателей типа файла, разделенных запятыми.. Например, средство выбора файлов, которому требуется содержимое, которое может быть представлено в виде изображения, включая как стандартные форматы изображений, так и файлы PDF, может выглядеть следующим образом:

   

Использование файловых входов

Базовый пример

  > Выберите файл для загрузки>>> Отправить>  

Это даст следующий результат:

Примечание . Вы также можете найти этот пример на GitHub — посмотрите исходный код, а также посмотрите, как он работает в реальном времени.

Независимо от устройства или операционной системы пользователя, ввод файла предоставляет кнопку, которая открывает диалоговое окно выбора файла, которое позволяет пользователю выбрать файл.

Включая несколько , как показано выше, указывает, что можно выбрать сразу несколько файлов. Пользователь может выбрать несколько файлов из средства выбора файлов любым способом, который позволяет выбранная платформа (например, удерживая Shift или Control , а затем щелкнув). Если вы хотите, чтобы пользователь выбирал только один файл для каждого , опустите атрибут multiple .

Ограничение допустимых типов файлов

Часто вы не хотите, чтобы пользователь мог выбирать любой произвольный тип файла; вместо этого вы часто хотите, чтобы они выбирали файлы определенного типа или типов. Например, если ваш входной файл позволяет пользователям загружать изображение профиля, вы, вероятно, захотите, чтобы они выбрали веб-совместимые форматы изображений, такие как JPEG или PNG.

Допустимые типы файлов могут быть указаны с помощью accept , который принимает список разрешенных расширений файлов или типов MIME, разделенных запятыми. Некоторые примеры:

  • accept = "image/png" или accept = ". Png" — Принимает файлы PNG.
  • accept = "image/png, image/jpeg" или accept = ". Png, .jpg, .jpeg " — принимать файлы PNG или JPEG.
  • accept =" image/* " — принимать любые файлы с image/ * Тип MIME. (Многие мобильные устройства также позволяют пользователю делать снимки с помощью камеры, когда она используется.)
  • accept = ". Doc, .docx, .xml, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document " — принимать все, что пахнет документом MS Word.

Давайте рассмотрим более полный пример:

 > Выберите файл для загрузки>>> Отправить>  

Технические характеристики

Спецификация Статус
HTML Living Standard
Определение атрибута accept в этой спецификации.
Уровень жизни
HTML 5.1
Определение «атрибута принятия» в этой спецификации.
Рекомендация
  • Использование файлов из веб-приложений
  • File API
Оцените статью
clickpad.ru
Добавить комментарий