limiter les fichiers sélectionnables par les extensions

Comment peut-on limiter les fichiers pouvant être sélectionnés avec l’élément input type = “file” par des extensions …?

Je connais déjà l’atsortingbut accept, mais en chrome il limite les fichiers par le dernier type MIME défini (dans ce cas “gif”) et FF4 ne limite même rien.

 

Est-ce que je fais quelque chose de mal? Ou y a-t-il un autre moyen?

Pour tout conseil …

Honnêtement, le meilleur moyen de limiter les fichiers est côté serveur. Les personnes peuvent usurper le type de fichier sur le client afin de saisir le nom complet du fichier au moment du transfert du serveur, d’parsingr le type de fichier et de renvoyer un message.

Un moyen facile de le faire serait:

  

Fonctionne avec tous les navigateurs, sauf IE9. Je ne l’ai pas testé dans IE10 +.

REMARQUE: Cette réponse date de 2011. C’était une très bonne réponse à l’époque, mais depuis 2015, les propriétés HTML natives sont sockets en charge par la plupart des navigateurs. Il n’est donc généralement pas nécessaire d’implémenter une telle logique dans JS. Voir la réponse d’Edi et les documents .


Avant de télécharger le fichier, vous pouvez vérifier l’extension du fichier à l’aide de Javascript et éviter que le formulaire ne soit envoyé s’il ne correspond pas. Le nom du fichier à télécharger est stocké dans le champ “value” de l’élément de formulaire.

Voici un exemple simple qui autorise uniquement le téléchargement de fichiers se terminant par “.gif”:

  

Cependant, cette méthode n’est pas infaillible. Sean Haddy a raison de vouloir toujours vérifier côté serveur, car les utilisateurs peuvent désactiver la vérification de Javascript en désactivant javascript ou en modifiant votre code après son arrivée dans leur navigateur. Vérifiez le côté serveur en plus de la vérification côté client. Je recommande également de vérifier la taille côté serveur afin que les utilisateurs ne bloquent pas votre serveur avec un fichier de 2 Go (il n’existe aucun moyen de vérifier la taille du fichier côté client sans utiliser Flash, une applet Java ou autre chose). ).

Cependant, il est toujours utile de vérifier le côté client avant d’utiliser la méthode que j’ai donnée ici, car cela peut prévenir les erreurs et dissuader légèrement les méfaits non graves.

  function uploadFile() { var fileElement = document.getElementById("fileToUpload"); var fileExtension = ""; if (fileElement.value.lastIndexOf(".") > 0) { fileExtension = fileElement.value.subssortingng(fileElement.value.lastIndexOf(".") + 1, fileElement.value.length); } if (fileExtension == "odx-d"||fileExtension == "odx"||fileExtension == "pdx"||fileExtension == "cmo"||fileExtension == "xml") { var fd = new FormData(); fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]); var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", uploadFailed, false); xhr.addEve`enter code here`ntListener("abort", uploadCanceled, false); xhr.open("POST", "/post_uploadReq"); xhr.send(fd); } else { alert("You must select a valid odx,pdx,xml or cmo file for upload"); return false; } } 

essayé cela, fonctionne très bien