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

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:

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.
Javascript sprawdza tylko rozszerzenie pliku, ale tak naprawdę nie może zweryfikować, czy wybrany plik to rzeczywisty plik jpg lub png.
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

5

możesz użyć acceptatrybutu do <input type="file">przeczytania tej dokumentacji http://www.w3schools.com/tags/att_input_accept.asp

— Yussan
ź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