Як дозволити <input type = "file"> приймати лише файли зображень?

375

Мені потрібно завантажувати лише <input type="file">тег- файл зображення через тег.

Зараз він приймає всі типи файлів. Але я хочу , щоб обмежити його лише певні розширення файлів зображень , які включають в себе .jpg, і .gifт.д.

Як я можу досягти цієї функціональності?

html

— кбвішну
джерело

Яка технологія використовується на сервері?

— Ердаль Г.

1

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

— Аарон Холл

942

Використовуйте атрибут accept тегу введення. Тому для прийняття лише 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 сміється
джерело

@madcap accept="file/csv, file/xls"чи правда ??

— КНУ

19

Ви впевнені, що це image/x-png? Згідно з цим списком, це просто image/png. iana.org/assignments/media-types/media-types.xhtml

— Micros

6

Такою має бути обрана відповідь! Просто не вистачає записки про те, що вам потрібно перевірити сторону сервера (через те, що браузер не підтримує, а також для безпеки)

— Erdal G.

1

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

— Дієго

1

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

163

Використовуючи це:

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

працює як у FF, так і в Chrome.

— Тіїло
джерело

14

Атрибут accept не є інструментом перевірки, всі завантаження повинні бути перевірені на сервері, завжди ...

— TlonXP

1

до сих пір не підтримується в рідному браузері Android, але працює на інших добре я припускаю , caniuse.com/#feat=input-file-accept

— MCY

Мені подобається це рішення, тому що у запиті файлу випадаючий тип показує "Файли зображень".

— хардсетінг

Будьте обережні з цим, оскільки це дозволяє SVG, які ви, можливо, не хочете.

— Стефанмурдок

Це дозволить отримати максимальні файли зображень .png, .jpg, .jpeg, .gif, .bmp, .ico, .tiff, .svg, .ai, .psp, .pcd, .pct, .raw. Тож краще конкретно згадати тип.

— Тамарай T

76

Використовуйте його так

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

Це працювало для мене

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

— Ер. Мохіт Агравал
джерело

Це не працює для iOS 12. Користувач все одно може вибирати відео на пристрої.

— користувач3160227

28

Етапи:
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

— юссан
джерело

3

Використовуючи type = "файл" та 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];:? Крім того, призначення id для введення не робиться звичайним чином.

— Іван П.

Насправді це не JS, це машинопис. Блок-код був скопійований з проекту Angular. Якщо ви хочете використовувати його у файлі javascript, вам слід опустити визначення типу (: Файл)

— Mati Cassanelli

0

Якщо ви хочете завантажити декілька зображень одночасно, ви можете додати multipleатрибут до введення.

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

Розгорніть фрагмент

— JerryGoyal
джерело