HTML: Comment limiter le téléchargement de fichiers à des images uniquement?

Avec HTML, comment limiter les types de fichiers pouvant être téléchargés?

Pour faciliter l'expérience utilisateur, je souhaite limiter les téléchargements de fichiers aux images (jpeg, gif, png).

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

HTML5 dit <input type="file" accept="image/*">. Bien sûr, ne faites jamais confiance à la validation côté client: vérifiez toujours à nouveau côté serveur ...

L'entrée de fichier HTML5 a un attribut d'acceptation et également un attribut multiple. En utilisant plusieurs attributs, vous pouvez télécharger plusieurs images dans une instance.

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

Vous pouvez également limiter plusieurs types de mime.

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

et une autre façon de vérifier le type mime à l'aide d'un objet fichier.

l'objet fichier vous donne le nom, la taille et le type.

var files=e.target.files;

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

Vous pouvez également restreindre l'utilisateur pour certains types de fichiers à télécharger par le code ci-dessus.

Édité

Si les choses étaient comme elles DEVRAIENT être, vous pouvez le faire via l'attribut "Accepter".

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

Cependant, les navigateurs l'ignorent à peu près, ce n'est donc pas pertinent. La réponse courte est, je ne pense pas qu'il existe un moyen de le faire en HTML. Vous devrez plutôt le vérifier côté serveur.

Le post plus ancien suivant contient des informations qui pourraient vous aider avec des alternatives.

Attribut 'accepter' d'entrée de fichier - est-ce utile?

Voici le code HTML pour le téléchargement d'images. Par défaut, il affichera les fichiers image uniquement dans la fenêtre de navigation car nous l'avons mis accept="image/*". Mais nous pouvons toujours le changer à partir du menu déroulant et il affichera tous les fichiers. Ainsi, la partie Javascript valide si le fichier sélectionné est ou non une image réelle.

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

Ici, lors de l'événement de changement, nous vérifions d'abord la taille de l'image. Et dans la deuxième ifcondition, nous vérifions s'il s'agit ou non d'un fichier image.

this.files[0].type.indexOf("image")le sera -1s'il ne s'agit pas d'un fichier image.

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>

Maintenant dans la partie html

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

ce code vérifiera si le fichier téléchargé est un fichier jpg ou non et restreint le téléchargement d'autres types

Vous ne pouvez le faire de manière sécurisée que côté serveur. L'utilisation de l'attribut "accept" est une bonne chose, mais doit également être validée côté serveur afin que les utilisateurs ne puissent pas cURL vers votre script sans cette limitation.

Je vous suggère de: supprimer tout fichier non image, avertir l'utilisateur et réafficher le formulaire.

Finalement, le filtre affiché dans la fenêtre Parcourir est défini par le navigateur. Vous pouvez spécifier tous les filtres souhaités dans l'attribut Accepter, mais vous n'avez aucune garantie que le navigateur de votre utilisateur y adhère.

Votre meilleur pari est de faire une sorte de filtrage dans le back-end sur le serveur.

Récupérez un projet appelé Uploadify. http://www.uploadify.com/

C'est un téléchargeur de fichiers basé sur Flash + jQuery. Cela utilise la boîte de dialogue de sélection de fichiers de Flash, qui vous permet de filtrer les types de fichiers, de sélectionner plusieurs fichiers en même temps, etc.