Formulaire post input type file auto créé

**eclisse** · 26/06/2021, 11h57

Bonjour,

J'ai hésité sur l'endroit ou poster cette question, puisqu'elle concerne à la fois html, javascript et asp. Si vous trouvez que ce sujet n'a pas sa place ici, on pourra toujours le déplacer dans une autre catégorie.

Descriptif :
J'ai un formulaire html/asp d'envoi de mail qui me permettait d'envoyer des mails (jusqu'à la normal) en y ajoutant des pièces jointes.
Seul nécessité, pouvoir ajouter des pj issues de répertoires distincts.
Je passait par un objet javascript multifile, qui regénerait un input (non multiple) à chaque chargement de nouveau fichier. Chaque fichier chargé était listé dans un tableau html, ce qui permettait éventuellement de le supprimer en cas d'erreur.
Or il semble devenu non compatible.

le soucis que j'ai c'est que (sous ff entre autre), des que je tente de créer un input à la volée, l'objet est bien créé et apparait à l'endroit où il est attendu, me permet de charger une pj, mais lors du submit, je n'ai aucun request file pris en compte...
Est ce normal ? Y a t-il eu une modification pour contrer des failles ? je vois pas bien où peut se situer l'erreur...

Sur la partie request, je travaille avec un Persits.Upload qui fonctionne très bien par ailleurs.
Si je créé en dur mon premier input sur la page, et les autres à la volée, le contenu du premier est bien passé en request et mon fichier créé, pas les autres.

le html :

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
<BODY topmargin=0 leftmargin=0 onload='initForm()'>
<form name='ff' action="/dropzone/save.asp" ENCTYPE="multipart/form-data" onsubmit='return CtrlForm()'>
<table>
...
<!--- les autres champs --->
...
<tr>
	<td colspan=2>
		<table width="100%" id="inputsTable" border="0"><tbody>
				<tr>
					<td class=label><label for=fichier>Fichier à charger</label></td>
					<td><input id=fichier onchange="addInputFile()" size=20 type=file name=file /></td>
					</tr></tbody></table>
	</td>
</tr>
<tr>
	<td colspan=2 valign=bottom>
	<table width=100%>
	<tr>
		<td></td>
		<td align=right>
 
			<a class='pictoX2 pictoCancelBtnX2' id='btnQuit' title="Annuler" onclick='parent.closeWindow()'></a>
			<a class='pictoX2 pictoSendBtnX2' id='btnSave' title="Envoyer" onclick='ff.btnHideSave.click()'></a>
			<input name='btnHideSave' id='btnHideSave' type="submit"  class='HideSubmit'>
		</td>
	</tr>
	</table>
	</td>
</tr>
</table>

le javascript:

Code :

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
36
37
38
39
40
41
42
 
function addInputFile(){
        var inputs = document.getElementsByTagName('input');
        var nbInputFile = 0;
        var nbFile = 0;
        // boucle de vérification du nombre d'input type file total
            // et du nombre d'input type file renseignés
            for (i=0;i!=inputs.length;i++) {
        input = inputs[i];
        if (input.type == 'file') {
            nbInputFile++;
            if (input.value.length > 0) {
            nbFile++;
            }
        }
        }
        //Si tous les inputs type file sont renseignés, on en ajoute un
        if (nbInputFile == nbFile) {
        tbody = document.getElementById("inputsTable").firstChild;
        ligne = document.createElement('tr');
        cellule1 = document.createElement('td');
        cellule1.setAttribute('class','label');
        label = document.createElement('label');
        label.setAttribute('for','file'+nbInputFile);
        labelText = document.createTextNode('');
        labelText.data = 'Fichier à charger';
        cellule2 = document.createElement('td');
        inputFile = document.createElement('input');
        inputFile.setAttribute('type','file');
        inputFile.setAttribute('id','file'+nbInputFile);
        //inputFile.setAttribute('size','20');
        inputFile.setAttribute('name','file'+nbInputFile);
	inputFile.onchange = addInputFile; 
        label.appendChild(labelText);
        cellule1.appendChild(label);
        cellule2.appendChild(inputFile);
        ligne.appendChild(cellule1);
        ligne.appendChild(cellule2);
        tbody.appendChild(ligne);
        return true;
        }  
    }

Une idée ?
Merci de votre contribution.

**mathieu** · 28/06/2021, 21h41

lors de l'envoi du formulaire, c'est du code javascript qui envoie les données ou bien le navigateur ?

**eclisse** · 29/06/2021, 00h45

Bonjour Mathieu,
merci de te pencher sur mon sujet.

Idéalement, je souhaiterait plutôt que ça soit le navigateur qui envoi les données...
Comme c'est un formulaire d'envoi de mail, j'ai tout un tas de données à faire passer
Là, après 30 tentatives avec plusieurs objets différent, j'ai mis en place un dropzone.js bidouillé, qui me permet de le faire pour partie; Mais à la fin de la mise en place, je me suis aperçu qu'il entrait en conflit avec un textarea ckeditor sur la page, a priori pas compatible si j'en crois les recherches que j'ait faites.

Tu as des infos sur une éventuelle incompatibilité récente de ff avec les events createElement ou appendChild ? Jusqu'à présents ces méthodes de création à la volée semblait bien fonctionner...

**mathieu** · 29/06/2021, 01h01

je n'ai pas compris à quel moment est votre souci. le formulaire est envoyé en javascript pour le moment ?
montrez nous le code javascript qui est lancé quand le formulaire est envoyé.

**eclisse** · 29/06/2021, 08h36

Tu as le formulaire plus haut.

Ce formulaire est envoyé par la navigateur sur un post classique avec la balise enctype qui va bien et un bouton submit qui procède à l'envoi.

La javascript indiqué n'est là que pour créer à la volée des input type file qui me permet de charger plus d'un fichier, dont le répertoire d'origine n'est pas le même que celui du premier fichier chargé.
Le soucis est que lorsque j'ajoute ces nouveaux inputs, ils sont bien ajouté au DOM, apparaissent dans ma form, je les charge avec un fichier, et leur valeur n'est pas transmise.

Si je créé en dur 1 input file dans mon form, sa valeur est bien envoyée dans mon post, mais celle des autres.
Coté server, j'ai 1 fichier uploadé sur X transmis.

Si je les créé tous à la volée, aucune valeur n'est envoyé.
Coté server, si je boucle sur les objets file transmis, je me retrouve avec ... rien!

**mathieu** · 29/06/2021, 23h26

dans la balise "form", ajoutez method="POST"

Formulaire post input type file auto créé

JavaScript

Vue hybride

Discussions similaires

Partager

Partager