Wie kann <input type = "file"> zulassen, dass nur Bilddateien akzeptiert werden?

375

Ich muss nur die Bilddatei über das <input type="file">Tag hochladen .

Derzeit werden alle Dateitypen akzeptiert. Ich möchte es jedoch auf bestimmte Bilddateierweiterungen beschränken .jpg, die .gifusw. enthalten.

Wie kann ich diese Funktionalität erreichen?

html kbvishnu
quelle
Welche Technologie wird serverseitig verwendet?
Erdal G.
1
kbvishnu, vielleicht könntest du die Antwort, die du vor so langer Zeit akzeptiert hast, noch einmal überdenken. Sie müssen keine andere Antwort akzeptieren. Ich schlage nur vor, basierend auf der Anzahl der Flaggen, die wir auf die Antwort erhalten haben, und der Anzahl der Stimmen im Vergleich zu anderen Antworten, dass Sie vielleicht zumindest in Betracht ziehen sollten, sie nicht zu akzeptieren.
Aaron Hall

Antworten:

942

Verwenden Sie das Attribut accept des Eingabe-Tags. Um nur PNGs, JPEGs und GIFs zu akzeptieren, können Sie den folgenden Code verwenden:

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

Oder einfach:

<input type="file" name="myImage" accept="image/*" />
Erweitern Sie das Snippet

Beachten Sie, dass dies dem Browser nur einen Hinweis darauf gibt, welche Dateitypen dem Benutzer angezeigt werden sollen. Dies kann jedoch leicht umgangen werden. Daher sollten Sie die hochgeladene Datei immer auch auf dem Server überprüfen.

Es sollte in IE 10+, Chrome, Firefox, Safari 6+ und Opera 15+ funktionieren, aber die Unterstützung ist auf Mobiltelefonen (ab 2015) sehr lückenhaft, und nach einigen Berichten kann dies tatsächlich verhindern, dass einige mobile Browser überhaupt etwas hochladen Stellen Sie sicher, dass Sie Ihre Zielplattformen gut testen.

Ausführliche Informationen zur Browserunterstützung finden Sie unter http://caniuse.com/#feat=input-file-accept

Madcap lacht
quelle
@ Madcap accept="file/csv, file/xls"ist es gültig?
KNU
19
Bist du sicher, dass es so ist image/x-png? Nach dieser Liste ist es gerecht image/png. iana.org/assignments/media-types/media-types.xhtml
Micros
6
Das sollte die ausgewählte Antwort sein! Es fehlt nur ein Hinweis, dass Sie immer noch serverseitig überprüfen müssen (wegen nicht unterstützten Browsers, aber auch aus Sicherheitsgründen)
Erdal G.
1
Wahrscheinlich hat es funktioniert, als die Antwort Antwort war, aber ich habe es einfach versucht und für FF nicht funktioniert. Ich musste nur accept = ". Png, .jpg, .jpeg" hinzufügen. ZB: jsfiddle.net/DiegoTc/qjsv8ay9/4
Diego
1
Verlassen Sie sich nicht vollständig darauf. Es kann problemlos auch andere Dateien akzeptieren. Sie müssen nur den Dateityp ändern, der im geöffneten Dateifenster zulässig ist.
163

Verwenden Sie diese:

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

funktioniert sowohl in FF als auch in Chrome.

Tyilo
quelle
14
Das accept-Attribut ist kein Validierungswerkzeug, alle Uploads sollten immer auf dem Server validiert werden ...
TlonXP
1
wird im nativen Android-Browser immer noch nicht unterstützt, funktioniert aber bei anderen gut. Ich denke, caniuse.com/#feat=input-file-accept
mcy
Ich mag diese Lösung, weil in der Dateiaufforderung in der Dropdown-Liste "Bilddateien" angezeigt wird.
Hardsetting
Seien Sie vorsichtig damit, da SVGs zulässig sind, die Sie möglicherweise nicht möchten.
Stephenmurdoch
Dies ermöglicht maximale Bilddateien .png, .jpg, .jpeg, .gif, .bmp, .ico, .tiff, .svg, .ai, .psp, .pcd, .pct, .raw. Es ist also besser, den Typ spezifisch zu erwähnen.
Thamarai T
76

Verwenden Sie es so 

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

Es hat bei mir funktioniert

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

Er. Mohit Agrawal
quelle
Dies funktioniert nicht für iOS 12. Der Benutzer kann weiterhin Videos im Gerät auswählen.
user3160227
28

Schritte:
1. Fügen Sie dem Eingabe-Tag ein Akzeptanzattribut hinzu.
2.
Überprüfen Sie mit Javascript. 3. Fügen Sie eine serverseitige Überprüfung hinzu, um zu überprüfen, ob der Inhalt wirklich ein erwarteter Dateityp ist

Für HTML und 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>

Erläuterung:

  1. Das Attribut accept filtert die Dateien, die im Popup der Dateiauswahl angezeigt werden. Es ist jedoch keine Validierung. Es ist nur ein Hinweis auf den Browser. Der Benutzer kann die Optionen im Popup weiterhin ändern.
  2. Das Javascript überprüft nur die Dateierweiterung, kann jedoch nicht wirklich überprüfen, ob es sich bei der ausgewählten Datei um ein tatsächliches JPG oder PNG handelt.
  3. Sie müssen also für die Überprüfung des Dateiinhalts auf der Serverseite schreiben.
Surya Kameswara Rao Ravi
quelle
1
vollständigste Antwort
paranoidhominid
27

Dies kann erreicht werden durch

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

Das ist aber kein guter Weg. Sie müssen auf der Serverseite codieren, um zu überprüfen, ob die Datei ein Bild enthält oder nicht.

Überprüfen Sie, ob es sich bei der Bilddatei um ein tatsächliches Bild oder ein falsches Bild handelt

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

Weitere Informationen finden Sie hier

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

Ashok Devatwal
quelle
3

Mit type = "file" und accept = "image / *" (oder dem gewünschten Format) kann der Benutzer eine Datei mit einem bestimmten Format auswählen. Sie müssen es jedoch auf der Clientseite erneut überprüfen, da der Benutzer einen anderen Dateityp auswählen kann. Das funktioniert bei mir.

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

Und dann in Ihrem Javascript-Skript

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
quelle
Dies ist die beste Antwort, da überprüft wird, ob es sich bei der Datei tatsächlich um ein Image handelt, ohne dass der Entwickler alle verschiedenen Erweiterungen angeben muss, die er zulassen möchte
Adam Marshall,
Ich verstehe deine Idee. Ist dies eine gültige JS-Syntax : const file: File = imageInput.files[0];? Das Zuweisen der ID zur Eingabe erfolgt ebenfalls nicht auf herkömmliche Weise.
Ivan P.
In der Tat ist nicht JS, es ist Typoskript. Der Blockcode wurde aus einem Angular-Projekt kopiert. Wenn Sie es in einer Javascript-Datei verwenden möchten, müssen Sie die Typdefinition (: Datei)
Mati Cassanelli
0

Wenn Sie mehrere Bilder gleichzeitig hochladen möchten, können Sie multipleder Eingabe ein Attribut hinzufügen . 

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

JerryGoyal
quelle