HTML: Wie kann der Datei-Upload auf Bilder beschränkt werden?

126

Wie kann ich mit HTML einschränken, welche Dateitypen hochgeladen werden können?

Um die Benutzererfahrung zu vereinfachen, möchte ich das Hochladen von Dateien auf nur Bilder (JPEG, GIF, PNG) beschränken.

<form method="post" action="..." enctype="multipart/form-data">
<label for="image">Photo</label>
<input name="image" type="file" />
</form>
JacobT
quelle
Um dies richtig abzusichern, würde ich natürlich auf der Backend- / Serverseite nachsehen. Aber alles, was ich suche, ist eine Möglichkeit, einfach die Benutzererfahrung zu verbessern, sodass sie beim Klicken auf "Durchsuchen", um das Bild zu finden, das sie hochladen möchten, nicht alle Word-Dokumente usw. sehen müssen, die nicht für zutreffen Upload
JacobT
Ich weiß nicht, dass Sie eine Dateimaske festlegen können. Ich habe es noch nie erfolgreich gesehen.
Robert K

Antworten:

230

HTML5 sagt <input type="file" accept="image/*">. Vertrauen Sie natürlich niemals der clientseitigen Validierung: Überprüfen Sie immer wieder auf der Serverseite ...

Ms2ger
quelle
87

Die HTML5-Dateieingabe hat ein Akzeptanzattribut und mehrere Attribute. Durch die Verwendung mehrerer Attribute können Sie mehrere Bilder in eine Instanz hochladen.

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

Sie können auch mehrere MIME-Typen einschränken.

<input type="file" multiple accept='image/*|audio/*|video/*' >

und eine andere Möglichkeit, den MIME-Typ mithilfe eines Dateiobjekts zu überprüfen.

Dateiobjekt gibt Ihnen Name, Größe und Typ.

var files=e.target.files;

var mimeType=files[0].type; // You can get the mime type

Sie können den Benutzer auch für das Hochladen einiger Dateitypen durch den obigen Code einschränken.

Konga Raju
quelle
4
image/*|audio/*|video/*funktioniert bei mir nicht, es sollte durch Kommas getrennt sein, wie es scheint:image/*,video/mp4,.txt
Serg
Ideal zum Überprüfen des mimeType! Tx!
Pedro Ferreira
6

Bearbeitet

Wenn die Dinge so wären, wie sie sein sollten, können Sie dies über das Attribut "Akzeptieren" tun.

http://www.webmasterworld.com/forum21/6310.htm

Browser ignorieren dies jedoch so gut wie, so dass dies nicht relevant ist. Die kurze Antwort lautet: Ich glaube nicht, dass es eine Möglichkeit gibt, dies in HTML zu tun. Sie müssten es stattdessen serverseitig überprüfen.

Der folgende ältere Beitrag enthält einige Informationen, die Ihnen bei Alternativen helfen können.

Dateieingabe 'accept' Attribut - ist es nützlich?

David
quelle
6

Hier ist der HTML-Code zum Hochladen von Bildern. Standardmäßig werden Bilddateien nur im Browserfenster angezeigt, da wir sie eingegeben haben accept="image/*". Wir können es jedoch weiterhin in der Dropdown-Liste ändern und es werden alle Dateien angezeigt. Der Javascript-Teil überprüft also, ob die ausgewählte Datei ein tatsächliches Bild ist oder nicht.

 <div class="col-sm-8 img-upload-section">
     <input name="image3" type="file" accept="image/*" id="menu_images"/>
     <img id="menu_image" class="preview_img" />
     <input type="submit" value="Submit" />
 </div> 

Hier beim Änderungsereignis überprüfen wir zuerst die Größe des Bildes. Und in der zweiten ifBedingung prüfen wir, ob es sich um eine Bilddatei handelt oder nicht.

this.files[0].type.indexOf("image")wird sein, -1wenn es keine Bilddatei ist.

document.getElementById("menu_images").onchange = function () {
    var reader = new FileReader();
    if(this.files[0].size>528385){
        alert("Image Size should not be greater than 500Kb");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();     
        return false;
    }
    if(this.files[0].type.indexOf("image")==-1){
        alert("Invalid Type");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();         
        return false;
    }   
    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("menu_image").src = e.target.result;
        $("#menu_image").show(); 
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};
Vineesh Puttanisseri
quelle
Erklärung bitte hinzufügen.
Paul Swetz
Bitte beachten Sie, dass für die oben genannten Fragen eine Abfrage erforderlich ist, dies jedoch nicht der Fall ist. Einfach genug, um es herauszufinden, aber hilfreich zu sagen. Ich habe dafür eine Geige geschaffen . Es macht einige andere Dinge (wie für ein Projekt erforderlich), aber das Konzept ist sehr ähnlich.
Dave Land
1

Sie können dies nur auf der Serverseite sicher tun. Die Verwendung des Attributs "accept" ist gut, muss jedoch auch auf der Serverseite überprüft werden, damit Benutzer ohne diese Einschränkung auf Ihr Skript zugreifen können.

Ich schlage vor, dass Sie: Nicht-Image-Dateien verwerfen, den Benutzer warnen und das Formular erneut anzeigen.

Robert K.
quelle
1
<script>

    function chng()
    {
        var typ=document.getElementById("fiile").value;
        var res = typ.match(".jp");

        if(res)
        {
            alert("sucess");
        }
        else
        {
            alert("Sorry only jpeg images are accepted");
            document.getElementById("fiile").value="; //clear the uploaded file
        }
    }

</script>

Jetzt im HTML-Teil

<input type="file" onchange="chng()">

Dieser Code prüft, ob es sich bei der hochgeladenen Datei um eine JPG-Datei handelt oder nicht, und schränkt das Hochladen anderer Typen ein

Arun Prabhakaran P.
quelle
Diese Prüfung wird durch ein einfaches Umbenennen der Dateierweiterung verhindert. Sie sollten mindestens den Daten-URI-Typ überprüfen, wenn Sie so etwas tun möchten.
Lucas Leblanc
0

Letztendlich wird der Filter, der im Fenster Durchsuchen angezeigt wird, vom Browser festgelegt. Sie können alle gewünschten Filter im Attribut Akzeptieren angeben, können jedoch nicht garantieren, dass der Browser Ihres Benutzers diese einhält.

Am besten filtern Sie im Backend des Servers.

John Lechowicz
quelle
0

Kasse eines Projekts namens Uploadify. http://www.uploadify.com/

Es ist ein Flash + jQuery-basierter Datei-Uploader. Hierbei wird der Dateiauswahldialog von Flash verwendet, mit dem Sie Dateitypen filtern, mehrere Dateien gleichzeitig auswählen usw. können.

AndrewR
quelle
30
Flash? ... auf keinen Fall!
ErickBest
14
Die schlechteste Lösung aller Zeiten.
Matteo Mosconi
1
Leute, ich verstehe nicht, warum es die schlechteste Lösung überhaupt ist. Obwohl es wahr ist, dass Flash verschwinden wird, wird es immer noch von alten Browsern verwendet - sehr alt, ok, wird aber immer noch verwendet - und diese Lösung verfügt über beide Arten von Technologien: jQuery + HTML5 und Flash-Fallback. Es ist so gut wie VideoJS, das einen Flash-Fallback hat, falls der Browser das Video nicht abspielen kann ... Ich habe die Lösung nicht getestet, es kann nicht die beste sein, aber die Abstimmungen sind nicht fair.
Unapedra
1
+1 Dumm, um abzustimmen. Flash geht weg, hat aber einen guten Fallback. Was verwendet Google Ihrer Meinung nach für Google Mail für Socket-Fallback? Dumm.
Jason Sebring
8
Diese Antwort ist 4 Jahre alt. Zu diesem Zeitpunkt wurde die HTML5-Unterstützung für die Auswahl mehrerer Dateien oder das Filtern des Auswahldateifensters nach den akzeptierten Typen in keinem der Hauptbrowser gut unterstützt. Dies war eine Lösung, die zu dieser Zeit für viele funktioniert hätte, aber ich würde jetzt zu einer reinen HTML5-Lösung übergehen.
AndrewR