Limiter le format de fichier lors de l’utilisation de ?

Je voudrais restreindre le type de fichier qui peut être choisi dans le sélecteur de fichiers du système d’exploitation natif lorsque l’utilisateur clique sur le bouton Parcourir dans l’élément en HTML. J’ai l’impression que c’est impossible, mais j’aimerais savoir s’il existe une solution. Je voudrais garder uniquement pour HTML et JavaScript; pas de flash s’il vous plaît.

    Ssortingctement parlant, la réponse est non . Le développeur ne peut pas empêcher l’utilisateur de choisir des fichiers de n’importe quel type ou extension dans la boîte de dialog de sélection de fichiers du système d’exploitation natif.

    Cependant, l’atsortingbut accept de peut aider à fournir un filtre dans la boîte de dialog de sélection de fichier du système d’exploitation. Par exemple,

       

    Il y a l’atsortingbut accept pour la balise d’entrée. Cependant, il n’est en aucun cas fiable. Les navigateurs le traitent très probablement comme une “suggestion”, ce qui signifie que l’utilisateur, selon le gestionnaire de fichiers, aura également une présélection qui affiche uniquement les types souhaités. Ils peuvent toujours choisir “tous les fichiers” et télécharger tous les fichiers qu’ils souhaitent.

    Exemple:

     

    lire plus dans la spécification html5

    Gardez à l’esprit qu’il ne doit être utilisé que comme une “aide” pour que l’utilisateur puisse trouver les bons fichiers. chaque utilisateur peut envoyer toute demande qu’il souhaite à votre serveur. il faut toujours tout valider côté serveur.

    Donc, la réponse est: non, vous ne pouvez pas restreindre , mais vous pouvez définir une présélection mais vous ne pouvez pas vous y fier.

    Alternativement ou en plus, vous pouvez faire quelque chose de similaire en vérifiant le nom de fichier (valeur du champ de saisie) avec JavaScript, mais cela n’a aucun sens car il ne fournit aucune protection et ne facilite pas la sélection pour l’utilisateur. Cela ne fait que tromper un webmaster en lui faisant croire qu’il est protégé et qu’il ouvre une faille de sécurité. Cela peut être pénible pour les utilisateurs qui ont des extensions de fichier alternatives (par exemple jpeg au lieu de jpg), des majuscules ou aucune extension de fichier (comme cela est courant sur les systèmes Linux).

    Vous pouvez utiliser l’événement de change pour surveiller ce que l’utilisateur sélectionne et les informer à ce stade que le fichier n’est pas acceptable. Il ne limite pas la liste réelle des fichiers affichés, mais il est le plus proche possible du côté client, en plus de l’atsortingbut accept mal pris en charge.

     var file = document.getElementById('someId'); file.onchange = function(e){ var ext = this.value.match(/\.([^\.]+)$/)[1]; switch(ext) { case 'jpg': case 'bmp': case 'png': case 'tif': alert('allowed'); break; default: alert('not allowed'); this.value=''; } }; 

    exemple à http://www.jsfiddle.net/gaby/7br93/1/

    Oui, tu as raison. C’est impossible avec HTML. L’utilisateur sera en mesure de choisir le fichier qu’il veut.

    Vous pourriez écrire un morceau de code JavaScript pour éviter de soumettre un fichier en fonction de son extension. Mais gardez à l’esprit que cela n’empêchera en aucun cas un utilisateur malveillant de soumettre un fichier qu’il souhaite réellement.

    Quelque chose comme:

     function beforeSubmit() { var fname = document.getElementById("ifile").value; // check if fname has the desired extension if (fname hasDesiredExtension) { return true; } else { return false; } } 

    Code HTML:

     

    Techniquement, vous pouvez spécifier l’ atsortingbut accept (alternative in html5 ) sur l’élément input , mais il n’est pas correctement pris en charge.

    Utiliser input balise d’ input avec l’atsortingbut accept

      

    Cliquez ici pour la dernière table de compatibilité du navigateur

    Démo en direct ici

    Pour sélectionner uniquement les fichiers image, vous pouvez utiliser cette accept="image/*"

      

    Démo en direct ici

    Seuls les formats gif, jpg et png seront affichés. Seuls les formats gif, jpg et png seront affichés.

    Je sais que c’est un peu tard.

     function Validatebodypanelbumper(theForm) { var regexp; var extension = theForm.FileUpload.value.substr(theForm.FileUpload1.value.lastIndexOf('.')); if ((extension.toLowerCase() != ".gif") && (extension.toLowerCase() != ".jpg") && (extension != "")) { alert("The \"FileUpload\" field contains an unapproved filename."); theForm.FileUpload1.focus(); return false; } return true; } 

    Vous pouvez réellement le faire avec JavaScript, mais souvenez-vous que js est côté client, vous devriez donc “avertir les utilisateurs” du type de fichiers qu’ils peuvent télécharger, si vous voulez ÉVITER (restreindre ou limiter comme vous l’avez dit) certains types de fichiers faites-le côté serveur.

    Regardez cette tutelle de base si vous souhaitez commencer avec la validation côté serveur. Pour le tutoriel complet, visitez cette page .

    Bonne chance!

    Comme mentionné dans les réponses précédentes, nous ne pouvons pas restreindre l’utilisateur pour sélectionner des fichiers pour des formats de fichiers donnés uniquement. Mais il est très pratique d’utiliser l’atsortingbut de balise d’acceptation dans le fichier HTML.

    En ce qui concerne la validation, nous devons le faire côté serveur. Nous pouvons également le faire du côté client à js mais ce n’est pas une solution infaillible. Nous devons valider côté serveur.

    Pour ces exigences, je préfère vraiment le framework de développement d’applications Web Java de struts2. Avec sa fonctionnalité de téléchargement de fichiers intégrée, télécharger des fichiers sur des applications Web basées sur struts2 est un jeu d’enfant. Il suffit de mentionner les formats de fichiers que nous aimerions accepter dans notre application et tout le rest est pris en charge par le kernel même du framework. Vous pouvez le vérifier sur le site officiel de Struts.