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

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:

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.
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.
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

5

Sie können das acceptAttribut zum <input type="file">Lesen dieser Dokumente verwenden: http://www.w3schools.com/tags/att_input_accept.asp

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