Ограничить формат файла при использовании <input type = «file»>?

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

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

Но все же атрибут accept<input type = "file"> может помочь обеспечить фильтр в диалоговом окне выбора файлов в ОС. Например,

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />

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

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

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

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

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

<input type="file" accept="image/*" /> <!-- all image types --> 
<input type="file" accept="audio/*" /> <!-- all audio types --> 
<input type="file" accept="video/*" /> <!-- all video types --> 

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

<!-- Right approach: Use both file extensions and corresponding MIME-types. -->
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

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

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

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

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

РЕДАКТИРОВАТЬ: Может быть, проверка типа файла с использованием его двоичной подписи также может быть выполнена на стороне клиента с помощью JavaScript (а не просто путем просмотра расширения) с использованием HTML5 File API, но, тем не менее, файл должен быть проверен на сервере, поскольку злоумышленник по-прежнему будет в состоянии загружать файлы, сделав собственный HTTP-запрос.

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

Например:

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

Читайте больше в спецификации HTML5

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

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

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

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

var file = document.getElementById('someId');

file.onchange = function(e) {
  var ext = this.value.match(/\.([^\.]+)$/)[1];
  switch (ext) {
    case 'jpg':
    case 'bmp':
    case 'png':
    case 'tif':
      alert('Allowed');
      break;
    default:
      alert('Not allowed');
      this.value = '';
  }
};

<input type="file" id="someId" />

JSFiddle

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

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

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

function beforeSubmit()
{
    var fname = document.getElementById("ifile").value;
    // check if fname has the desired extension
    if (fname hasDesiredExtension) {
        return true;
    } else {
        return false;
    }
}

HTML код:

<form method="post" onsubmit="return beforeSubmit();">
    <input type="file" id="ifile" name="ifile"/>
</form>

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

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

<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />

Нажмите здесь для просмотра последней таблицы совместимости браузера

Live демо здесь

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

<input type="file" name="my-image" id="image" accept="image/*" />

Демо здесь

Будут показаны только GIF, JPG и PNG, захват экрана из версии Chrome 44

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

function Validatebodypanelbumper(theForm)
{
   var regexp;
   var extension =     theForm.FileUpload.value.substr(theForm.FileUpload1.value.lastIndexOf('.'));
   if ((extension.toLowerCase() != ".gif") &&
       (extension.toLowerCase() != ".jpg") &&
       (extension != ""))
   {
      alert("The \"FileUpload\" field contains an unapproved filename.");
      theForm.FileUpload1.focus();
      return false;
   }
   return true;
}

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

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

Удачи!

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

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

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

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

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

  <input type="file" accept="image/*" />

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

  <input type="file" accept="image/bmp, image/jpeg, image/png" />

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

  <input type="file" accept=".bmp, .doc, .pdf" />

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