Как разрешить <input type = «file»> принимать только файлы изображений?

376

Мне нужно загрузить только файл изображения через <input type="file"> тег.

Прямо сейчас, он принимает все типы файлов. Но я хочу ограничить его только конкретными расширениями файлов изображений, которые включают .jpgи .gifт. Д.

Как я могу достичь этой функциональности?

html

— kbvishnu
источник

Какая технология используется на стороне сервера?

— Эрдал Г.

1

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

— Аарон Холл

944

Используйте атрибут accept тега input. Таким образом, чтобы принимать только PNG, JPEG и GIF, вы можете использовать следующий код:

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

Развернуть фрагмент

Или просто:

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

Развернуть фрагмент

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

Он должен работать в IE 10+, Chrome, Firefox, Safari 6+, Opera 15+, но поддержка очень слабая на мобильных устройствах (по состоянию на 2015 г.), и в некоторых отчетах это может фактически помешать некоторым мобильным браузерам загружать что-либо вообще, поэтому не забудьте проверить свои целевые платформы хорошо.

Подробную поддержку браузера см. По адресу http://caniuse.com/#feat=input-file-accept.

— сумасшедший смеется
источник

@madcap accept="file/csv, file/xls"это действительно ??

— KNU

19

Вы уверены, что это image/x-png? Согласно этому списку, это просто image/png. iana.org/assignments/media-types/media-types.xhtml

— Micros

6

Это должен быть выбранный ответ! В нем просто отсутствует примечание о том, что вам все еще нужно проверять серверную часть (из-за отсутствия поддержки браузера, но также и из-за безопасности)

— Эрдал Г.

1

Возможно, это сработало, когда ответом был ответ, но просто попробовал и не сработал для FF. Мне просто нужно было добавить accept = ". Png, .jpg, .jpeg" Например: jsfiddle.net/DiegoTc/qjsv8ay9/4

— Диего

1

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

164

Используя это:

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

работает как в FF, так и в Chrome.

— Tyilo
источник

14

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

— TlonXP

1

все еще не поддерживается в родном браузере Android, но работает на других хорошо, я думаю, caniuse.com/#feat=input-file-accept

— mcy

Мне нравится это решение, потому что в приглашении файла раскрывающийся список типов показывает «Файлы изображений».

— твердо зарегестрирован

Будьте осторожны с этим, потому что он позволяет SVG, которые вы, возможно, не хотите.

— stephenmurdoch

Это позволит максимально использовать файлы изображений .png, .jpg, .jpeg, .gif, .bmp, .ico, .tiff, .svg, .ai, .psp, .pcd, .pct, .raw. Так что лучше упомянуть тип конкретно.

— Thamarai T

76

Используйте это так

<input type="file" accept=".png, .jpg, .jpeg" />

У меня сработало

https://jsfiddle.net/ermagrawal/5u4ftp3k/

— Er. Мохит Агравал
источник

Это не работает для iOS 12. Пользователь по-прежнему может выбирать видео на устройстве.

— user3160227

29

Шаги:
1. Добавьте атрибут accept к входному тегу
2. Подтвердите с помощью javascript
3. Добавьте проверку на стороне сервера, чтобы проверить, действительно ли содержимое имеет ожидаемый тип файла

Для HTML и JavaScript:

<html>
<body>
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()"/>
<script type="text/javascript">
    function validateFileType(){
        var fileName = document.getElementById("fileName").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
            //TO DO
        }else{
            alert("Only jpg/jpeg and png files are allowed!");
        }   
    }
</script>
</body>
</html>

Объяснение:

Атрибут accept фильтрует файлы, которые будут отображаться во всплывающем окне выбора файлов. Тем не менее, это не проверка. Это только подсказка для браузера. Пользователь по-прежнему может изменять параметры во всплывающем окне.
Javascript проверяет только расширение файла, но не может реально проверить, является ли выбранный файл фактическим JPG или PNG.
Таким образом, вы должны написать для проверки содержимого файла на стороне сервера.

— Сурья Камешвара Рао Рави
источник

1

самый полный ответ

— параноидоминид

27

Это может быть достигнуто путем

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

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

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

if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    }
    else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}

Для получения дополнительной информации см. Здесь

http://www.w3schools.com/tags/att_input_accept.asp
http://www.w3schools.com/php/php_file_upload.asp

— Ашок Деватвал
источник

5

Вы можете использовать acceptатрибут для <input type="file">чтения этой документации http://www.w3schools.com/tags/att_input_accept.asp

— yussan
источник

3

Используя type = "file" и accept = "image / *" (или нужный вам формат), разрешите пользователю выбрать файл с определенным форматом. Но вы должны еще раз проверить это на стороне клиента, потому что пользователь может выбрать другой тип файлов. Это работает для меня.

<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />

А потом, в вашем сценарии JavaScript

processFile(imageInput) {
    if (imageInput.files[0]) {
      const file: File = imageInput.files[0];
      var pattern = /image-*/;

      if (!file.type.match(pattern)) {
        alert('Invalid format');
        return;
      }

      // here you can do whatever you want with your image. Now you are sure that it is an image
    }
  }

— Мати Кассанелли
источник

Это лучший ответ, так как он проверит, является ли файл на самом деле изображением, не требуя от разработчика указывать все различные расширения, которые он хочет разрешить

— Адам Маршалл

Я понял вашу идею. Является ли это действительный синтаксис JS: const file: File = imageInput.files[0];? Кроме того, назначение идентификатора для ввода не делается обычным способом.

— Иван П.

На самом деле это не JS, это машинопись. Код блока был скопирован из проекта Angular. Если вы хотите использовать его в файле JavaScript, вы должны опустить определение типа (: Файл)

— Мати Кассанелли

0

Если вы хотите загрузить несколько изображений одновременно, вы можете добавить multiple атрибут для ввода.

upload multiple files: <input type="file" multiple accept='image/*'>

Развернуть фрагмент

— JerryGoyal
источник