<input type="file">limiter les fichiers sélectionnables par extensions

Question

Comment quelqu'un peut-il limiter les fichiers pouvant être sélectionnés avec l'élément input type="file" par extensions ?

Je connais déjà l'attribut accept, mais dans Chrome, il limite les fichiers par le dernier type MIME défini (dans ce cas "gif") et FF4 ne limite même rien.

 <input type="file" accept="image/jpg, image/gif">

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

Answer 1

Un moyen simple de le faire serait:

 <input type="file" accept=".gif,.jpg,.jpeg,.png,.doc,.docx">

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

Answer 2

Honnêtement, le meilleur moyen de limiter les fichiers est côté serveur. Les gens peuvent usurper le type de fichier sur le client. Il est donc généralement préférable de saisir le nom complet du fichier au moment du transfert du serveur, d'analyser le type de fichier, puis de renvoyer un message.

Answer 3

 function uploadFile() {
     var fileElement = document.getElementById("fileToUpload");
        var fileExtension = "";
        if (fileElement.value.lastIndexOf(".") > 0) {
            fileExtension = fileElement.value.substring(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.addEventListener("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