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

Ответ 1

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

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

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

Ответ 2

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

Например:

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

Ответ 3

Вы можете использовать событие 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" />

Ответ 4

Да, вы правы. Это невозможно с 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>

Ответ 5

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

Ответ 6

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

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

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

Демо-версия здесь

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

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

Демо-версия здесь

Отобразятся только gif, jpg и png, захват экрана из версии Chrome версии 44

Ответ 7

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

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;
}

Ответ 8

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

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

Удачи!

Ответ 9

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

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

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