HTML: come limitare il caricamento di file in modo che siano solo immagini?

Con l'HTML, come faccio a limitare il tipo di tipi di file che possono essere caricati?

Per facilitare l'esperienza dell'utente, voglio limitare i caricamenti di file in modo che siano solo immagini (jpeg, gif, png).

<form method="post" action="..." enctype="multipart/form-data">
<label for="image">Photo</label>
<input name="image" type="file" />
</form>

Dice HTML5 <input type="file" accept="image/*">. Ovviamente, non fidarti mai della convalida lato client: controlla sempre di nuovo sul lato server ...

L'input del file HTML5 ha un attributo di accettazione e anche un attributo multiplo. Utilizzando più attributi è possibile caricare più immagini in un'istanza.

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

Puoi anche limitare più tipi MIME.

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

e un altro modo per controllare il tipo MIME usando l'oggetto file.

oggetto file ti dà nome, dimensione e tipo.

var files=e.target.files;

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

È inoltre possibile limitare l'utente per alcuni tipi di file da caricare tramite il codice sopra.

Modificato

Se le cose fossero come DOVREBBERO essere, potresti farlo tramite l'attributo "Accetta".

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

Tuttavia, i browser lo ignorano praticamente, quindi è irrilevante. La risposta breve è: non credo ci sia un modo per farlo in HTML. Dovresti invece controllarlo lato server.

Il seguente post precedente contiene alcune informazioni che potrebbero aiutarti con le alternative.

Attributo "accetta" di input del file: è utile?

Ecco l'HTML per il caricamento delle immagini. Per impostazione predefinita mostrerà i file di immagine solo nella finestra di navigazione perché abbiamo messo accept="image/*". Ma possiamo ancora cambiarlo dal menu a discesa e mostrerà tutti i file. Quindi la parte Javascript convalida se il file selezionato è o meno un'immagine reale.

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

Qui sull'evento di modifica per prima cosa controlliamo la dimensione dell'immagine. E nella seconda ifcondizione controlliamo se si tratta o meno di un file immagine.

this.files[0].type.indexOf("image")sarà -1se non è un file immagine.

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

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

Ora nella parte html

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

questo codice controllerà se il file caricato è un file jpg o meno e limita il caricamento di altri tipi

Puoi farlo in modo sicuro solo sul lato server. L'uso dell'attributo "accept" è buono, ma deve anche essere convalidato sul lato server per evitare che gli utenti siano in grado di eseguire il cURL del tuo script senza questa limitazione.

Ti suggerisco di: eliminare qualsiasi file non immagine, avvisare l'utente e visualizzare nuovamente il modulo.

Infine, il filtro visualizzato nella finestra Sfoglia è impostato dal browser. Puoi specificare tutti i filtri che desideri nell'attributo Accetta, ma non hai alcuna garanzia che il browser dell'utente vi aderisca.

La soluzione migliore è fare una sorta di filtro nel back-end del server.

Controlla un progetto chiamato Uploadify. http://www.uploadify.com/

È un uploader di file basato su Flash + jQuery. Questo utilizza la finestra di dialogo di selezione dei file di Flash, che ti dà la possibilità di filtrare i tipi di file, selezionare più file contemporaneamente, ecc.