Récupération attribut input type file pour envoi vers php

Bonjour à tous
Je viens demander votre afin de réaliser une opération.

J'ai une page avec des inputs de type file et j'aimerai récupérer les fichiers sélectionnés et les envoyés vers PHP pour une insertion dans la base de donnée.

J'utilise le code ci dessous qui marche en l'état mais j'ai besoin de récupérer également les attributs (data-num et data-onum) pour former un tableau qui sera envoyé vers PHP où le tableau sera récupéré et les données enregistrés dans la bdd.
J'ai essayé d'ajouter les attributs au code mais ca ne marche pas et me renvoi une erreur pour donnée non Blob. Je ne sais finalement pas comment faire cette opération et je demande votre aide s'il vous plais.

Code:

---

<input class="custom-file" data_num="1" data_onum="2" type="file" name="file[]">

---

Code:

---

1 2 3

$("[type='file']").each(function(){ formData.append($(this).attr("name"),$(this).get(0).files[0]); });

---

Merci pour votre aide.

Cordialement

data-num ... pas d'underscore ..

=> .data('num')
ou
=> .attrib('data-num')


ou si tu tiens à conservet l'underscore

.attr('data_num')

Merci pour ta proposition.

J'ai essayé comme ci dessous mais j'ai l'erreur suivantes :

Code:

---

1 2 3

$("[type='file']").each(function(){ formData.append($(this).data('num'),$(this).data('onum'),$(this).attr("name"),$(this).get(0).files[0]); });

---

L'erreur :
Uncaught (in promise) TypeError: Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'.

Merci pour ton aide

Tu as modifié le undersocre ?
et tu appendes juste du texte ?

Oui j'ai modifié le underscore et j'ai ceci :

Code:

---

<input class="custom-file" data-num="4" data-onum="3" type="file" name="file[]">

---

Mais j'ai toujours la même erreur qui se produit

https://jsfiddle.net/njz13xw5/

Merci beaucoup pour le temps que tu prends pour m'aider.

La j'ai regardé l'exemple, ca marche mais juste que dans mon cas j'ai plusieurs inputs et j'essai de boucler sur chacune, afin de passer tous les attributs dans formData par formData.append pour les récupérer sur une page PHP et c'est à ce niveau que ca coince.
C'est la seule méthode que je connais pour envoyer des fichiers vers PHP du coup la je suis bloqué.

Code:

---

1 2 3

$("[type='file']").each(function(){ formData.append($(this).data('num'),$(this).data('onum'),$(this).attr("name"),$(this).get(0).files[0]); });

---

Et c'est la que j'ai cette erreur : Uncaught (in promise) TypeError: Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'.

Peut être qu'il y a une autre façon d'y arriver en partant de ta proposition mais honnêtement je ne connais et j'aimerai bien apprendre.

Merci pour ton assistance

la méthode "append", ajoute seulement une valeur à chaque appel :
https://developer.mozilla.org/fr/doc...ormData/append

donc le code devrait plutôt être de ce genre :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

$("[type='file']").each(function () {   formData.append("num[]", $(this).data('num'));   formData.append("onum[]", $(this).data('onum'));   formData.append("name[]", $(this).attr("name"));   formData.append("fichier[]", $(this).get(0).files[0]);   });

---

Merci énormément mathieu, c'est exactement ce dont j'ai besoin