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

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>

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

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.

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?

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

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.

<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

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.

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.