web-dev-qa-db-fra.com

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

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

Pour faciliter l'expérience de l'utilisateur, je souhaite limiter le nombre de téléchargements de fichiers à des images (jpeg, gif, png).

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

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

215
Ms2ger

Le fichier HTML5 a un attribut accept et 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 en utilisant un objet fichier.

objet de 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 limiter l'utilisateur pour certains types de fichiers à télécharger à l'aide du code ci-dessus.

78
Konga Raju

Edité

Si les choses étaient ce qu'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, c'est donc irrelavant. 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.

La publication plus ancienne suivante contient des informations qui pourraient vous aider avec des alternatives.

Attribut 'accepter' du fichier - est-ce utile?

6
David

Voici le code HTML pour le téléchargement d'image. Par défaut, les fichiers d’image ne seront affichés que dans la fenêtre de navigation car nous avons mis accept="image/*". Mais nous pouvons toujours le changer depuis le menu déroulant et il affichera tous les fichiers. Donc, la partie Javascript valide si 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, lors de l'événement de changement, nous vérifions d'abord la taille de l'image. Et dans la seconde condition if, nous vérifions s’il s’agit ou non d’un fichier image.

this.files[0].type.indexOf("image") sera -1 s'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]);
};
5
Vineesh Puttanisseri

Vous ne pouvez le faire que de manière sécurisée côté serveur. L'utilisation de l'attribut "accept" est une bonne chose, mais vous devez également la valider côté serveur pour que les utilisateurs ne puissent pas se connecter à votre script sans cette limitation.

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

1
Robert K

En fin de compte, le filtre affiché dans la fenêtre Parcourir est défini par le navigateur. Vous pouvez spécifier tous les filtres de votre choix dans l'attribut Accepter, mais rien ne garantit que le navigateur de votre utilisateur y adhérera.

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

0
John Lechowicz

Extraire un projet appelé Uploadify. http://www.uploadify.com/

C'est un uploader de fichiers basé sur Flash + jQuery. Ceci utilise la boîte de dialogue de sélection de fichier de Flash, qui vous permet de filtrer les types de fichier, de sélectionner plusieurs fichiers simultanément, etc.

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

0
Arun Prabhakaran P