Jak zezwolić <input type = „file”> na akceptowanie tylko plików obrazów?

375

Muszę przesłać tylko plik obrazu poprzez <input type="file">tag.

Obecnie akceptuje wszystkie typy plików. Ale chcę, aby ograniczyć ją tylko do konkretnych rozszerzeń plików graficznych, które obejmują .jpg, .gifetc.

Jak mogę uzyskać tę funkcjonalność?

html kbvishnu
źródło
Jaka technologia jest używana po stronie serwera?
Erdal G.,
1
kbvishnu, być może mógłbyś ponownie rozważyć odpowiedź, którą zaakceptowałeś tak dawno temu. Nie musisz akceptować innej odpowiedzi. Po prostu sugeruję, w oparciu o liczbę flag, które otrzymaliśmy na odpowiedź i jej poziom głosów w porównaniu z innymi odpowiedziami, że może powinieneś przynajmniej rozważyć jej odrzucenie.
Aaron Hall

Odpowiedzi:

942

Użyj atrybutu accept znacznika wejściowego. Aby więc akceptować tylko pliki PNG, JPEG i GIF, możesz użyć następującego kodu:

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

Lub po prostu:

<input type="file" name="myImage" accept="image/*" />
Rozwiń fragment kodu

Pamiętaj, że daje to jedynie podpowiedź dla przeglądarki, jakie typy plików mają być wyświetlane użytkownikowi, ale można to łatwo obejść, dlatego zawsze powinieneś sprawdzać poprawność przesłanego pliku również na serwerze.

Powinien działać w IE 10+, Chrome, Firefox, Safari 6+, Opera 15+, ale obsługa jest bardzo pobieżna na telefony komórkowe (od 2015 r.), A według niektórych raportów może to w rzeczywistości uniemożliwić przesyłanie czegokolwiek przez niektóre przeglądarki mobilne, więc koniecznie przetestuj platformy docelowe.

Szczegółowa obsługa przeglądarki znajduje się na stronie http://caniuse.com/#feat=input-file-accept

szalony śmieje się
źródło
@madcap accept="file/csv, file/xls"czy to ważne?
KNU
19
Jesteś pewien, że to jest image/x-png? Według tej listy jest po prostu image/png. iana.org/assignments/media-types/media-types.xhtml
Micros
6
To powinna być wybrana odpowiedź! Brakuje tylko notatki z informacją, że nadal musisz sprawdzić po stronie serwera (z powodu nieobsługiwanej przeglądarki, ale także ze względów bezpieczeństwa)
Erdal G.
1
Prawdopodobnie zadziałało, gdy odpowiedź była odpowiedzią, ale po prostu spróbowałem i nie działało dla FF. Musiałem tylko dodać accept = ". Png, .jpg, .jpeg" Na przykład: jsfiddle.net/DiegoTc/qjsv8ay9/4
Diego
1
Nie polegaj na tym całkowicie. Może również z łatwością akceptować inne pliki. Musisz tylko zmienić typ pliku dozwolony w otwartym oknie pliku.
163

Za pomocą tego:

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

działa zarówno w FF, jak i Chrome.

Tyilo
źródło
14
Atrybut accept nie jest narzędziem sprawdzania poprawności, wszystkie przesłane pliki powinny być sprawdzane na serwerze, zawsze ...
TlonXP
1
nadal nie jest obsługiwany w natywnej przeglądarce Androida, ale działa dobrze na innych. Myślę, że caniuse.com/#feat=input-file-accept
mcy
Podoba mi się to rozwiązanie, ponieważ w wierszu polecenia rozwijanego typu pojawia się „Pliki obrazów”.
hardsetting
Uważaj na to, ponieważ pozwala on na pliki SVG, których możesz nie chcieć.
stephenmurdoch
Pozwoli to na maksymalne pliki obrazów .png, .jpg, .jpeg, .gif, .bmp, .ico, .tiff, .svg, .ai, .psp, .pcd, .pct, .raw. Lepiej więc podać konkretnie typ.
Thamarai T
76

Użyj tego w ten sposób 

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

To zadziałało dla mnie

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

Er. Mohit Agrawal
źródło
To nie działa w systemie iOS 12. Użytkownik może nadal wybrać wideo w urządzeniu.
user3160227
28

Kroki:
1. Dodaj atrybut accept do znacznika wejściowego
2. Sprawdź
poprawność za pomocą javascript 3. Dodaj weryfikację po stronie serwera, aby sprawdzić, czy zawartość jest rzeczywiście oczekiwanym typem pliku

W przypadku HTML i 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>

Wyjaśnienie:

  1. Atrybut accept filtruje pliki, które będą wyświetlane w wyskakującym oknie wyboru plików. Nie jest to jednak sprawdzanie poprawności. To tylko wskazówka dla przeglądarki. Użytkownik może nadal zmieniać opcje w wyskakującym okienku.
  2. Javascript sprawdza tylko rozszerzenie pliku, ale tak naprawdę nie może zweryfikować, czy wybrany plik to rzeczywisty plik jpg lub png.
  3. Musisz napisać o sprawdzeniu zawartości pliku po stronie serwera.
Surya Kameswara Rao Ravi
źródło
1
najbardziej kompletna odpowiedź
paranoidhominid
27

Można to osiągnąć przez

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

Ale to nie jest dobry sposób. musisz kodować po stronie serwera, aby sprawdzić plik lub obraz.

Sprawdź, czy plik obrazu to rzeczywisty obraz czy fałszywy obraz

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

Aby uzyskać więcej informacji, zobacz tutaj

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

Ashok Devatwal
źródło
3

Używając type = "file" i accept = "image / *" (lub żądanego formatu), pozwól użytkownikowi wybrać plik o określonym formacie. Ale musisz ponownie to sprawdzić po stronie klienta, ponieważ użytkownik może wybrać inny typ plików. To działa dla mnie.

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

A potem w twoim skrypcie 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
    }
  }
Mati Cassanelli
źródło
To najlepsza odpowiedź, ponieważ sprawdzi, czy plik jest rzeczywiście obrazem, nie wymagając od dewelopera określenia wszystkich różnych rozszerzeń, na które chcą zezwolić
Adam Marshall,
Rozumiem twój pomysł. Jest to ważny składni JS: const file: File = imageInput.files[0];? Ponadto przypisanie id do danych wejściowych nie odbywa się w tradycyjny sposób.
Ivan P.
W rzeczywistości to nie JS, to maszynopis. Kod blokowy został skopiowany z projektu Angular. Jeśli chcesz go użyć w pliku javascript, musisz pominąć definicję typu (: Plik)
Mati Cassanelli
0

Jeśli chcesz przesłać wiele zdjęć jednocześnie, możesz dodać multipleatrybut do danych wejściowych. 

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

JerryGoyal
źródło