Le enctype du formulaire n'est pas pris en compte dans XMLHttpRequest avec FormData

**moimp** · 08/11/2019, 15h42

Bonjour,

J'ai plusieurs formulaires et je veux que mes données soient toujours envoyées au même format, par exemple avec enctype="multipart/form-data".
Je me suis référé à cette article, paragraphe "Une brève introduction au méthodes de submission".
Malheureusement le format de sortie dépend du formulaire et ne prend pas en compte son attribut enctype et j'obtiens soit un délimiteur final soit aucun.

Code html :

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

<form method="post" action="" enctype="multipart/form-data" class="cardForm">

Exemple de résultats transmis:
avec un premier formulaire::

array (
'id' => '2963',
'company' => 'AG2I',
)

et avec un autre formulaire:

array (
'id' => '2963',
'action_type' => '3',
'-----------------------------7e3c825405dc--' => '',
)

Je vous donne mon code JavaScript:

Code js :

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

1
2
3
4
5
6
7
8
function send(objField)
{
	const objForm	= objField.form
		,request	= new XMLHttpRequest()
	;
	request.open('POST', handleFile, false);
	request.send(new FormData(objForm));
}

Invité · 08/11/2019, 15h56

Bonjour,

as-tu testé l'exemple fourni ?

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sending forms with FormData &ndash; MDN</title>
<script type="text/javascript">
"use strict";
 
function ajaxSuccess () {
  alert(this.responseText);
}
 
function AJAXSubmit (oFormElement) {
  if (!oFormElement.action) { return; }
  var oReq = new XMLHttpRequest();
  oReq.onload = ajaxSuccess;
  if (oFormElement.method.toLowerCase() === "post") {
    oReq.open("post", oFormElement.action, true);
    oReq.send(new FormData(oFormElement));
  } else {
    var oField, sFieldType, nFile, sSearch = "";
    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
      oField = oFormElement.elements[nItem];
      if (!oField.hasAttribute("name")) { continue; }
      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
      if (sFieldType === "FILE") {
        for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
      }
    }
    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
    oReq.send(null);
  }
}
</script>
</head>
<body>
 
<h1>Sending forms with FormData</h1>
 
<h2>Using the GET method</h2>
 
<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
  <fieldset>
    <legend>Registration example</legend>
    <p>
      First name: <input type="text" name="firstname" /><br />
      Last name: <input type="text" name="lastname" />
    </p>
    <p>
      <input type="submit" value="Submit" />
    </p>
  </fieldset>
</form>
 
<h2>Using the POST method</h2>
<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
 
<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
  <fieldset>
    <legend>Registration example</legend>
    <p>
      First name: <input type="text" name="firstname" /><br />
      Last name: <input type="text" name="lastname" />
    </p>
    <p>
      <input type="submit" value="Submit" />
    </p>
  </fieldset>
</form>
 
<h3>Enctype: text/plain</h3>
 
<p>The text/plain encoding is not supported by the FormData API.</p>
 
<h3>Enctype: multipart/form-data</h3>
 
<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
  <fieldset>
    <legend>Upload example</legend>
    <p>
      First name: <input type="text" name="firstname" /><br />
      Last name: <input type="text" name="lastname" /><br />
      Sex:
      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
      Password: <input type="password" name="secret" /><br />
      What do you prefer:
      <select name="image_type">
        <option>Books</option>
        <option>Cinema</option>
        <option>TV</option>
      </select>
    </p>
    <p>
      Post your photos:
      <input type="file" multiple name="photos[]">
    </p>
    <p>
      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
    </p>
    <p>
      Describe yourself:<br />
      <textarea name="description" cols="50" rows="8"></textarea>
    </p>
    <p>
      <input type="submit" value="Submit" />
    </p>
  </fieldset>
</form>
 
</body>
</html>

register.php

Code php :

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
<?php
/* register.php */
 
header("Content-type: text/plain");
 
/*
NOTE: You should never use `print_r()` in production scripts, or
otherwise output client-submitted data without sanitizing it first.
Failing to sanitize can lead to cross-site scripting vulnerabilities.
*/
 
echo ":: data received via GET ::\n\n";
print_r($_GET);
 
echo "\n\n:: Data received via POST ::\n\n";
print_r($_POST);
 
echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
 
echo "\n\n:: Files received ::\n\n";
print_r($_FILES);

Après test, je n'y vois rien qui ressemble à '-----------------------------7e3c825405dc--' => '',

**mathieu** · 08/11/2019, 20h38

votre discussion précédente était autour du même sujet donc je ne suis pas sûr que cela apporte quelque chose de créer une nouvelle discussion :
https://www.developpez.net/forums/d2...mp-formulaire/

dans cette autre discussion, je vous avais proposé de regarder ce qui est envoyé par le navigateur dans la console de développement pour vérifier si le format envoyé par le navigateur est correct. donc je repropose la même chose ici.

**moimp** · 09/11/2019, 14h47

@jreaux62
Oui, j'avais déjà testé l'exemple. Il fonctionne très bien mais ne correspond pas à mon application. Dans mon cas:

Le déclenchement se fait sans bouton, mais à chaque modification d'un champ.
J'ai un ou plusieurs formulaires identiques l'un à la suite de l'autre.
Dans le traitement, je n'affiche rien mais j'effectue un contrôle php de mes données et en l'absence d'erreur, je les enregistre en base de données.
La présence d'un délimiteur en dernière ligne dépend du ou des formulaires. Il faut encore que je vérifie dans quel cas, j'ai ou non cette dernière ligne.

@mathieu

Je n'ai jamais eu de réponse à la dernière ligne de mon dernier post.
J'ai reposé une question en libellant le sujet de façon plus précise compte tenu de mon avance sur le sujet.
J'ai résolu provisoirement le problème en supprimant ce délimiteur, lorsqu'il existe mais je trouve cette solution plutôt bâtarde.
EDIT: Je voudrais empêcher la génération de ce délimiteur et comprendre pourquoi il apparaît parfois seulement.

Code PHP de suppression de la ligne:

Code php :

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

1
2
3
4
5
6
7
8
$post = $_POST;
// Suite d'après commentaire utilisateur sur array_key_last
if ( is_array( $post ) ) {
	end( $post );
	$key = key( $post );
}
if ( preg_match("#^-{1,30}(\w)+-*$#", $key) )
	array_pop($post);

Le enctype du formulaire n'est pas pris en compte dans XMLHttpRequest avec FormData

AJAX

Discussions similaires

Partager

Partager