103 votes

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

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?

290voto

Edi Budimilic Points 414

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

14voto

Sean Haddy Points 456

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.

1voto

prajwal Points 11
 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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X