HTML: Comment limiter l'upload de fichier de n'être que des images?

HTML5 Fichier d'entrée a accepter attribut et aussi des attributs multiples. En utilisant l'attribut multiple, vous pouvez télécharger plusieurs images dans une instance.

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

Vous pouvez également limiter le nombre de types mime.

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

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

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

Voici le code HTML pour l'upload d'images. Par défaut, il va afficher l'image uniquement les fichiers dans la fenêtre de navigation parce que nous avons mis accept="image/*". Mais on peut toujours le modifier à partir de la liste déroulante et on vous montrera tous les fichiers. De sorte que la partie Javascript valide ou non le fichier sélectionné est 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 sur l'événement de changement, on vérifie d'abord la taille de l'image. Et dans la deuxième if condition que nous avons vérifier si oui ou non il s'agit d'un fichier image.

this.files[0].type.indexOf("image") sera -1 si ce n'est pas 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]);
};

En fin de compte, le filtre qui est affiché dans la fenêtre de navigation est définie par le navigateur. Vous pouvez spécifier tous les filtres que vous voulez dans l'Accepter attribut, mais vous n'avez aucune garantie que votre navigateur de l'utilisateur va y adhérer.

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

<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 permet de vérifier si le fichier téléchargé est un fichier jpg ou pas et limite le chargement d'autres types de