Récupérer les files d'un input type=file

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:

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:

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.

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:

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.

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.