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

126

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>
JacobT
la source
De toute évidence, pour sécuriser correctement cela - je vérifierais du côté backend / serveur. Mais tout ce que je recherche, c'est un moyen simplement de vivre l'expérience utilisateur afin que lorsqu'ils cliquent sur "parcourir" pour trouver l'image qu'ils souhaitent télécharger, ils n'aient pas à voir tous ces documents Word, etc. qui ne s'appliquent pas à télécharger
JacobT
Je ne sais pas si vous pouvez définir un masque de fichier. Je ne l'ai jamais vu réussir.
Robert K

Réponses:

230

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

Ms2ger
la source
87

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.

Konga Raju
la source
4
image/*|audio/*|video/*ne fonctionne pas pour moi, il devrait être séparé par des virgules, il semble:image/*,video/mp4,.txt
serg
Idéal pour vérifier le mimeType! Tx!
Pedro Ferreira
6

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

David
la source
6

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]);
};
Vineesh Puttanisseri
la source
Ajoutez une explication s'il vous plaît.
Paul Swetz
Veuillez noter que ce qui précède nécessite jquery, mais ne le dit pas. Assez facile à comprendre, mais utile à énoncer. J'ai créé un violon pour cela . Il fait d'autres choses (comme requis pour un projet), mais le concept est à peu près le même.
Dave Land
2
<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

Arun Prabhakaran P
la source
Cette vérification est annulée par un simple changement de nom de l'extension de fichier. Vous devriez au moins vérifier le type d'URI de données si vous comptez faire quelque chose comme ça.
Lucas Leblanc
1

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.

Robert K
la source
0

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.

John Lechowicz
la source
0

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.

AndrewR
la source
30
Flash? ... pas moyen!
ErickBest
14
La pire solution qui soit.
Matteo Mosconi
1
Les gars, je ne vois pas pourquoi c'est la pire solution qui soit. Bien qu'il soit vrai que Flash va disparaître, il est toujours utilisé par les anciens navigateurs - très vieux, d'accord, mais est toujours utilisé - et cette solution a les deux types de technologies: jQuery + HTML5 et Flash de secours. C'est aussi bon que VideoJS, qui a une solution de secours Flash au cas où le navigateur ne pourrait pas lire la vidéo ... Je n'ai pas testé la solution, ce n'est peut-être pas la meilleure, mais les votes négatifs ne sont pas justes.
Unapedra
1
+1 idiot de voter contre. Flash s'en va mais a un bon repli. Que pensez-vous que Google utilise pour Gmail pour le repli de socket? Idiot.
Jason Sebring
8
Cette réponse a 4 ans. À l'époque, la prise en charge de HTML5 pour la sélection de fichiers multiples ou le filtrage de la fenêtre de sélection de fichiers par les types acceptés n'était pas bien prise en charge dans les principaux navigateurs. C'était une solution qui aurait fonctionné pour beaucoup à l'époque, mais je passerais maintenant à une solution HTML5 pure.
AndrewR