problème avec queryselectorAll et innerHtml de chaque SPAN

Par OOO777, il y a 2 ans

Javascript

j'ai plusieurs inputs[file] que je selectionne et recupe le fichier et je l'affiche sous alert(nom fichier) seulement je n'arrive pas a afficher le nom du fichier dans son SPAN respectifs sous INNERHTML.
dommage que le nom d'un fichier est afficher dans tous les span des autres inputs
pourriez-vous m'aider svp; Meilleurs voeux.
voici mon code JAVASCRIPT

"```"

             //select tous les input file
            const modalInputfile = document.querySelectorAll("[data-toggle=modalInputfile]");
            const fileText = document.querySelectorAll(".textInputfile");
            // All input file
            for (let i = 0; i < modalInputfile.length; i++) {
                modalInputfile[i].addEventListener('change', function () {
                    const TextFiles = this.files;
                    for (let p = 0; p < fileText.length; p++) {
                        if (TextFiles.length > 0) {
                            const fileName = TextFiles[0].name;
                            // fileText[p].innerHTML= fileName;
                            alert("Le fichier selectionné est : "+fileName);
                        } else {
                        }
                    }
                });
            }

"```"

Le code HTML est le suivant

"```"

        <input type="file" name="image-file" id="fileInputdriver" data-toggle="modalInputfile" hidden>
        <label for="fileInputdriver">
                 <span class="custom-image-test"><i class="fas fa-camera-retro camera-retro"></i>Choisir votre fichier drivers</span>
          </label>
          <span  class="textInputfile">Aucun fichier selectionné pour l'instant</span>

"```"

3 réponses

popotte, il y a 2 ans

Hello :)

Alors un moyen ce serait d'encapsuler chaque listes de input label span dans une div, et dans ton event tu choppes l'élément parent (la div) puius la dernière div de son child (le span) et ensuite tu set le HTML

En gros faudrait faire ça, bon j'ai un peu fais à l'aveugle alors c'est à adapter :p

const modalInputfile = document.querySelectorAll("[data-toggle=modalInputfile]"); modalInputfile.each(element => { element.addEventListener("change", event => { // event.target = input, parentNode = div, lastChild = last child of this div = span event.target.parentNode.lastChild.innerHTML = event.target.files[0].name }) })

Et pour le HTML faudrait wrapper chaque listes par une div pour target le parentNode du js

<div> <input type="file" name="image-file" id="fileInputdriver" data-toggle="modalInputfile" hidden> <label for="fileInputdriver"> <span class="custom-image-test"><i class="fas fa-camera-retro camera-retro"></i>Choisir votre fichier drivers</span> </label> <span class="textInputfile">Aucun fichier selectionné pour l'instant</span> </div>
OOO777, il y a 2 ans

bonjour et merci pour votre reponse, dommage que ca ne meche pas
je teste meme pour changer le style css de lelement ciblé mais ca ne marche toujours pas

popotte, il y a 2 ans

De rien ;)

Mmmh okay et en console tu as une erreur qui t'explique ce qui doit etre arrangé?

Sinon au pire une autre façon de faire, tu peux chopper toutes les span et faire un filtre en mettant une ref dans le input et le span

<input type="file" name="image-file" id="fileInputdriver" class="modalInputfile" data-toggle="modalInputfile_1" hidden> <span data-ref="modalInputfile_1" class="textInputfile">Aucun fichier selectionné pour l'instant</span> <!-- et le data-ref pour les autres blocs ce sera modalInputfile_2, 3, 4, 5, etc... -->

Et en JS

const modalInputfile = document.querySelectorAll(".modalInputfile"); // On prends tous les input const textInputFiles = document.querySelectorAll(".textInputFile"); // On prends tous les span modalInputfile.each(element => { element.addEventListener("change", event => { const ref = event.target.dataset["toggle"] // On récupère le data-toggle de l'input qui a changé const textInputFile = textInputFiles.filter(el => el.dataset["ref"] === ref) // On filtre les spans en en récupérant que celui qui a le même data-ref que le data-toggle de l'input qui a changé textInputFile.innerHTML = event.target.files[0].name // On change le html :) }) })