web-dev-qa-db-fra.com

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

comment limiter les fichiers pouvant être sélectionnés avec l'élément input type = "file" par des extensions ...?

Je connais déjà l'attribut accept, mais dans chrome), les fichiers sont limités 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?

Thy pour tout conseil ...

htmlinput-type-file
65
haemse

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

12
Sean Haddy

Un moyen facile 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é dans IE10 +.

175
Edi Budimilic

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

Avant le téléchargement du fichier, vous pouvez vérifier l'extension du fichier à l'aide de Javascript et empêcher le formulaire de le soumettre s'il ne correspond pas. Le nom du fichier à télécharger est stocké dans le champ "valeur" de l'élément de formulaire.

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

<script type="text/javascript">
    function checkFile() {
        var fileElement = document.getElementById("uploadFile");
        var fileExtension = "";
        if (fileElement.value.lastIndexOf(".") > 0) {
            fileExtension = fileElement.value.substring(fileElement.value.lastIndexOf(".") + 1, fileElement.value.length);
        }
        if (fileExtension.toLowerCase() == "gif") {
            return true;
        }
        else {
            alert("You must select a GIF file for upload");
            return false;
        }
    }
</script>

<form action="upload.aspx" enctype="multipart/form-data" onsubmit="return checkFile();">
    <input name="uploadFile" id="uploadFile" type="file" />

    <input type="submit" />
</form>

Cependant, cette méthode n'est pas infaillible. Sean Haddy a raison de dire que vous voulez toujours vérifier côté serveur, car les utilisateurs peuvent désactiver votre vérification Javascript en désactivant JavaScript ou en modifiant votre code après son arrivée dans leur navigateur. Vérifiez définitivement côté serveur en plus de la vérification côté client. Je recommande également de vérifier la taille côté serveur aussi, afin que les utilisateurs ne plantent pas votre serveur avec un fichier de 2 Go (à ma connaissance, il est impossible de vérifier la taille du fichier côté client sans utiliser Flash ou un Java applet ou quelque chose).

Cependant, il est toujours utile de vérifier côté client avant d’utiliser la méthode que j’ai donnée ici, car elle permet d’éviter les erreurs et constitue un élément dissuasif mineur pour les méfaits peu graves.

22
Joshua Carmody
 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.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

1
prajwal