Boucle de récupération attribut suivant index

Version imprimable

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:

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

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

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:

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:

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); } });

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:

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>