Discussion :

[dharkan]

bonjour,

j'ai un input de type file dans une page web. A l'aide de jquery (ou javascript) je tente de récupérer le(s) fichier(s) choisit. Cependant mon attribut files est toujours null même après avoir sélectionner un fichier.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div class="dropArea" id="dropAutre">
                                    <button class="txtAreaAutre">
                                        <img src="~/img/upload.png" alt="upload">
                                        Déposez votre fichier ici
                                    </button>
                                    <input type="file" id="autreFile" name="files" onchange="fileSelect('#ulDropAreaAutre', event)" style="display:block;" />
                                </div>
                                <ul id="ulDropAreaAutre" style="list-style:none;"></ul>
                                <input type="button" id="uploadAutreFile" name="uploadAutreFile" value="Uploader le fichier" class="btn btnMenu" />

code jquery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 $('#uploadAutreFile').click(function (e) {
       var my_files = $("#autreFile").files;
        //$("#frmAutreFile").find("input[type=file]").each(function (index, field) {
        //    const file = field.files[0];
        //    if (file.size > 5242880 || file.fileSize > 5242880) {
        //        errorMessage = 'Files must be less than 5MB.';
        //        alert(errorMessage);
        //    }
        //});
    });

Pouvez vous me dire quel est le problème ? Car je récupère bien mon file input mais files vaut null or j'ai bel et bien sélectionné un fichier.

[Watilin]

files est une propriété de l’objet DOM natif HTMLInputElement. Or, jQuery enveloppe les éléments DOM. Pour obtenir une référence sur l’objet DOM natif, tu dois « décapsuler » l’objet en utilisant .get().

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var my_files = $("#autreFile").get(0).files;

Petit détail, $("#autreFile").files ne vaut pas null mais undefined. Ça peut avoir son importance dans certains cas, par exemple avec typeof.

[dharkan]

Bonjour,

merci pour l'information sur comment récupérer les fichiers de mon file input, cela fonctionne.
Merci aussi pour la nuance entre undefined et null

Cordialement.