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

Version imprimable

08/11/2019, 15h42
moimp

Le enctype du formulaire n'est pas pris en compte dans XMLHttpRequest avec FormData
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:

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

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

Citation:

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

et avec un autre formulaire:

Citation:

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

Je vous donne mon code JavaScript:
Code:

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

Bonjour,

as-tu testé l'exemple fourni ?

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
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:

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--' => '', :koi:

08/11/2019, 20h38
mathieu

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.

@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:

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