Comment permettre à <input type = "file"> d'accepter uniquement les fichiers image?

376

J'ai besoin de télécharger uniquement le fichier image via la <input type="file">balise.

À l'heure actuelle, il accepte tous les types de fichiers. Mais, je veux le limiter à des extensions de fichier image spécifiques qui incluent .jpg, .gifetc.

Comment puis-je obtenir cette fonctionnalité?

html kbvishnu
la source
Quelle est la technologie utilisée côté serveur?
Erdal G.
1
kbvishnu, vous pourriez peut-être reconsidérer la réponse que vous avez acceptée il y a si longtemps. Vous n'êtes pas obligé d'accepter une autre réponse. Je suggère simplement, sur la base du nombre d'indicateurs que nous obtenons sur la réponse et de son niveau de votes par rapport aux autres réponses, que vous devriez peut-être au moins envisager de ne pas l'accepter.
Aaron Hall

Réponses:

944

Utilisez l' attribut accept de la balise d'entrée. Donc, pour n'accepter que les PNG, JPEG et GIF, vous pouvez utiliser le code suivant:

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />
Développer l'extrait

Ou simplement:

<input type="file" name="myImage" accept="image/*" />
Développer l'extrait

Notez que cela ne fournit qu'un indice au navigateur sur les types de fichiers à afficher pour l'utilisateur, mais cela peut être facilement contourné, vous devez donc toujours valider le fichier téléchargé sur le serveur.

Cela devrait fonctionner dans IE 10+, Chrome, Firefox, Safari 6+, Opera 15+, mais la prise en charge est très sommaire sur les mobiles (à partir de 2015) et selon certains rapports, cela peut en fait empêcher certains navigateurs mobiles de télécharger quoi que ce soit, donc assurez-vous de bien tester vos plateformes cibles.

Pour une prise en charge détaillée du navigateur, voir http://caniuse.com/#feat=input-file-accept

fous rires
la source
@madcap accept="file/csv, file/xls"est-il valide ??
KNU
19
Etes-vous sûr que c'est image/x-png? Selon cette liste, c'est juste image/png. iana.org/assignments/media-types/media-types.xhtml
Micros
6
Ce devrait être la réponse choisie! Il manque juste une note disant que vous devez toujours vérifier côté serveur (en raison du navigateur non compatible, mais aussi pour des raisons de sécurité)
Erdal G.
1
Cela a probablement fonctionné quand la réponse était une réponse, mais je l'ai juste essayé et cela n'a pas fonctionné pour FF. Je devais juste ajouter accept = ". Png, .jpg, .jpeg" Par exemple: jsfiddle.net/DiegoTc/qjsv8ay9/4
Diego
1
Ne vous y fiez pas complètement. Il peut également facilement accepter d'autres fichiers. Vous avez juste besoin de changer le type de fichier autorisé dans la fenêtre de fichier ouverte.
164

En utilisant ceci:

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

fonctionne à la fois dans FF et Chrome.

Tyilo
la source
14
L'attribut accept n'est pas un outil de validation, tous les téléchargements doivent être validés sur le serveur, toujours ...
TlonXP
1
toujours pas pris en charge dans le navigateur natif Android, mais fonctionne bien sur les autres, je suppose caniuse.com/#feat=input-file-accept
mcy
J'aime cette solution car dans l'invite de fichier, la liste déroulante de type affiche "Fichiers image".
hardsetting
Soyez prudent avec cela, car il autorise les SVG, ce que vous ne voudrez peut-être pas.
stephenmurdoch
Cela permettra un maximum de fichiers image .png, .jpg, .jpeg, .gif, .bmp, .ico, .tiff, .svg, .ai, .psp, .pcd, .pct, .raw. Il est donc préférable de mentionner spécifiquement le type.
Thamarai T
76

Utilisez-le comme ça 

<input type="file" accept=".png, .jpg, .jpeg" />

Ça a marché pour moi

https://jsfiddle.net/ermagrawal/5u4ftp3k/

Er. Mohit Agrawal
la source
Cela ne fonctionne pas pour iOS 12. L'utilisateur peut toujours choisir la vidéo dans l'appareil.
user3160227
29

Étapes:
1. Ajoutez un attribut d'acceptation à la balise d'entrée
2. Validez avec javascript
3. Ajoutez une validation côté serveur pour vérifier si le contenu est vraiment un type de fichier attendu

Pour HTML et javascript:

<html>
<body>
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()"/>
<script type="text/javascript">
    function validateFileType(){
        var fileName = document.getElementById("fileName").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
            //TO DO
        }else{
            alert("Only jpg/jpeg and png files are allowed!");
        }   
    }
</script>
</body>
</html>

Explication:

  1. L'attribut accept filtre les fichiers qui seront affichés dans la fenêtre contextuelle du sélecteur de fichiers. Cependant, ce n'est pas une validation. Ce n'est qu'un indice pour le navigateur. L'utilisateur peut toujours modifier les options dans la fenêtre contextuelle.
  2. Le javascript ne valide que l'extension du fichier, mais ne peut pas vraiment vérifier si le fichier sélectionné est un jpg ou png réel.
  3. Vous devez donc écrire pour la validation du contenu du fichier côté serveur.
Surya Kameswara Rao Ravi
la source
1
réponse la plus complète
paranoidhominid
27

Ceci peut être réalisé en

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

Mais ce n'est pas un bon moyen. vous devez coder côté serveur pour vérifier le fichier une image ou non.

Vérifiez si le fichier image est une image réelle ou une fausse image

if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    }
    else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}

Pour plus de référence, voir ici

http://www.w3schools.com/tags/att_input_accept.asp
http://www.w3schools.com/php/php_file_upload.asp

Ashok Devatwal
la source
3

En utilisant type = "file" et accept = "image / *" (ou le format que vous voulez), permettez à l'utilisateur de choisir un fichier avec un format spécifique. Mais vous devez le vérifier à nouveau du côté client, car l'utilisateur peut sélectionner un autre type de fichiers. Cela fonctionne pour moi.

<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />

Et puis, dans votre script javascript

processFile(imageInput) {
    if (imageInput.files[0]) {
      const file: File = imageInput.files[0];
      var pattern = /image-*/;

      if (!file.type.match(pattern)) {
        alert('Invalid format');
        return;
      }

      // here you can do whatever you want with your image. Now you are sure that it is an image
    }
  }
Mati Cassanelli
la source
C'est la meilleure réponse, car elle vérifiera si le fichier est réellement une image sans exiger du développeur qu'il spécifie toutes les différentes extensions qu'il souhaite autoriser
Adam Marshall
J'ai ton idée. Est - ce une syntaxe JS valide: const file: File = imageInput.files[0];? De plus, l'attribution d'un identifiant à l'entrée ne se fait pas de manière conventionnelle.
Ivan P.
En fait, ce n'est pas JS, c'est typographique. Le code de bloc a été copié à partir d'un projet Angular. Si vous souhaitez l'utiliser dans un fichier javascript, vous devez omettre la définition de type (: File)
Mati Cassanelli
0

Si vous souhaitez télécharger plusieurs images à la fois, vous pouvez ajouter un multipleattribut à l'entrée. 

upload multiple files: <input type="file" multiple accept='image/*'>
Développer l'extrait

JerryGoyal
la source