Boucle de récupération attribut suivant index

**Devas225** · 04/05/2022, 14h34

Bonjour à tous
Je viens demander votre aide.

J'ai un input de type file avec des attributs. Je souhaite récupérer le fichier ainsi que les attributs que j’envoie vers php.
J’essaie comme ci dessous mais ça ne passe pas et je tourne en vain sans solution.

Code html :

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

<input class="custom-file-inp files ciblex" data-cib="cibex" type="file" id="ciblex" name="ciblex[]">

Code :

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

1
2
3
4
5
6
7
var vaq1= document.getElementById('ciblex').files.length;
for (var index = 0; index <= vaq1; index++) {
	testval = document.getElementsByName('ciblex')[index].getAttribute('data-cib');
        formData.append("ciblex[]", document.getElementById('ciblex').files[index]);
	formData.append("cib[]", document.getElementsByName('ciblex')[index].getAttribute('data-cid'));
	console.log(testval);
}

Merci pour votre aide

Cordialement

**Pytet** · 05/05/2022, 10h00

Bonjour,

Pour récupérer les attributs de ton input, tu peux utiliser la méthode getElementById() pour récupérer cet élément puis getAttribute() sur ce même élément.

Code :

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

1
2
const inputFile = document.getElementById('ciblex');
console.log(inputFile.getAttribute('data-cib'));

Ton input file ne possède pas l'attribut multiple, du coup l'utilisateur ne doit pouvoir sélectionner qu'un seul fichier et la boucle ne semble pas nécessaire dans ton code.
Il faudrait p-e utiliser un écouteur sur l'évènement onchange de ton input pour récupérer le fichier lorsque l'utilisateur le sélectionne.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
const inputFile = document.getElementById('ciblex');
console.log(inputFile.getAttribute('data-cib'));
 
inputFile.addEventListener('change', () => {
  if (inputFile.files.length > 0) {
    const file = inputFile.files[0];
 
    console.log(file.name);
    console.log(file.size);
  }
});

**ASCIIDEFOND** · 14/05/2022, 11h30

Bonjour à tous,

Si cela peut aider. Récupérer le nom et taille d’un fichier, ainsi que les attributs d’un élément en JQuery.

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<body>
<body>
    <style>
        textarea {
            display: block;
            margin: 40px 40px;
            width: 700px;
            height: 200px;
        }
    </style>
 
    <input type="file" class="custom-file-inp files ciblex" data-cib="cibex1" id="ciblex1" name="ciblex[1]">
    <input type="file" class="custom-file-inp files ciblex" data-cib="cibex2" id="ciblex2" name="ciblex[2]">
    <input type="file" class="custom-file-inp files ciblex" data-cib="cibex3" id="ciblex3" name="ciblex[3]">
    <textarea></textarea>
 
    <script>
        $('input[type=file]').on('change', function () {
            var infosfilename,
                element = "tag: " + $(this).prop("tagName") + "\r",
                filename = $(this).get(0).files[0];
 
            infosfilename = "File name: " + filename.name + "\rTaille: " + filename.size + "\n\r";
 
            element += "index: " + $(this).index() + "\r";
 
            $(this.attributes).each(function () {
                element += this.name + ": " + this.value + "\r";
            });
 
            $('textarea').text("--- Infos du fichier\r" + infosfilename +
                "--- Le tag, l'index et attibuts de l'élément\r" + element);
        });
    </script>
</body>

Boucle de récupération attribut suivant index

jQuery

Vue hybride

Discussions similaires

Partager

Partager