diff options
author | julieng <julien.gattelier@gmail.com> | 2021-10-02 17:20:24 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-02 17:30:20 +0200 |
commit | 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch) | |
tree | 30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files/fr/web/api/formdata/using_formdata_objects | |
parent | c05efa8d7ae464235cf83d7c0956e42dc6974103 (diff) | |
download | translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.gz translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.bz2 translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.zip |
convert content to md
Diffstat (limited to 'files/fr/web/api/formdata/using_formdata_objects')
-rw-r--r-- | files/fr/web/api/formdata/using_formdata_objects/index.md | 117 |
1 files changed, 60 insertions, 57 deletions
diff --git a/files/fr/web/api/formdata/using_formdata_objects/index.md b/files/fr/web/api/formdata/using_formdata_objects/index.md index 93fc4bc977..480822832a 100644 --- a/files/fr/web/api/formdata/using_formdata_objects/index.md +++ b/files/fr/web/api/formdata/using_formdata_objects/index.md @@ -12,13 +12,14 @@ tags: translation_of: Web/API/FormData/Using_FormData_Objects original_slug: Web/API/FormData/Utilisation_objets_FormData --- -<p>L’objet <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> vous permet de compiler un ensemble de paires clé/valeur à envoyer à l’aide de l’API <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code>. Il est principalement destiné à l’envoi de données de formulaire, mais il peut également être utilisé indépendamment des formulaires pour transmettre des données indexées. Le format des données transmises est le même que celui qu’utiliserait la méthode {{domxref("HTMLFormElement.submit","submit()")}} du formulaire pour envoyer les données si l’encodage de ce dernier était défini sur <code>multipart/form-data</code>.</p> +L’objet [`FormData`](/en-US/docs/Web/API/FormData) vous permet de compiler un ensemble de paires clé/valeur à envoyer à l’aide de l’API [`XMLHttpRequest`](/en-US/docs/Web/API/XMLHttpRequest). Il est principalement destiné à l’envoi de données de formulaire, mais il peut également être utilisé indépendamment des formulaires pour transmettre des données indexées. Le format des données transmises est le même que celui qu’utiliserait la méthode {{domxref("HTMLFormElement.submit","submit()")}} du formulaire pour envoyer les données si l’encodage de ce dernier était défini sur `multipart/form-data`. -<h2 id="Création_intégrale_d’un_objet_FormData">Création intégrale d’un objet FormData</h2> +## Création intégrale d’un objet FormData -<p>Vous pouvez construire un objet <code>FormData</code> vous-même, en créer une instance, puis y ajouter des champs en appelant la méthode {{domxref("FormData.append","append()")}}, comme suit :</p> +Vous pouvez construire un objet `FormData` vous-même, en créer une instance, puis y ajouter des champs en appelant la méthode {{domxref("FormData.append","append()")}}, comme suit : -<pre class="brush: js">var formData = new FormData(); +```js +var formData = new FormData(); formData.append("username", "Groucho"); formData.append("accountnum", 123456); // le numéro 123456 est converti immédiatement en chaîne "123456" @@ -27,7 +28,7 @@ formData.append("accountnum", 123456); // le numéro 123456 est converti immédi formData.append("userfile", fileInputElement.files[0]); // objet JavaScript de type fichier -var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file... +var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file... var blob = new Blob([content], { type: "text/xml"}); formData.append("webmasterfile", blob); @@ -35,59 +36,63 @@ formData.append("webmasterfile", blob); var request = new XMLHttpRequest(); request.open("POST", "http://foo.com/submitform.php"); request.send(formData); -</pre> +``` -<div class="note"> - <p><strong>Note :</strong> Les champs « userfile » et « webmasterfile » contiennent tous deux un fichier. Le numéro attribué au champ « accountnum » est immédiatement converti en chaîne par la méthode <a href="/en/DOM/XMLHttpRequest/FormData#append()"><code>FormData.append()</code></a> (la valeur du champ peut être un objet {{ domxref("Blob") }}, {{ domxref("File") }} ou une chaîne : <strong>s’il ne s’agit ni d’un objet Blob, ni d’un objet File, la valeur est convertie en chaîne</strong>).</p> -</div> +> **Note :** Les champs « userfile » et « webmasterfile » contiennent tous deux un fichier. Le numéro attribué au champ « accountnum » est immédiatement converti en chaîne par la méthode [`FormData.append()`](</en/DOM/XMLHttpRequest/FormData#append()>) (la valeur du champ peut être un objet {{ domxref("Blob") }}, {{ domxref("File") }} ou une chaîne : **s’il ne s’agit ni d’un objet Blob, ni d’un objet File, la valeur est convertie en chaîne**). -<p>Dans cet exemple, une instance <code>FormData</code> contenant les valeurs des champs « username », « accountnum », « userfile » et « webmasterfile » est créée, puis la méthode <code>XMLHttpRequest</code> <a href="/en/DOM/XMLHttpRequest#send()"><code>send()</code></a> est utilisée pour envoyer les données du formulaire. Le champ « webmasterfile » est un objet {{domxref("Blob")}}. Un objet <code>Blob</code> représente un objet-fichier de données brutes immuables. Les Blobs représentent des données qui ne sont pas nécessairement dans un format JavaScript natif. L’interface {{ domxref("File") }} se base sur l’objet <code>Blob</code>, elle en hérite les fonctionnalités et les étend pour prendre en charge les fichiers du système de l’utilisateur. Pour construire un <code>Blob</code>, vous pouvez invoquer le {{domxref("Blob.Blob","constructeur Blob()")}}.</p> +Dans cet exemple, une instance `FormData` contenant les valeurs des champs « username », « accountnum », « userfile » et « webmasterfile » est créée, puis la méthode `XMLHttpRequest` [`send()`](</en/DOM/XMLHttpRequest#send()>) est utilisée pour envoyer les données du formulaire. Le champ « webmasterfile » est un objet {{domxref("Blob")}}. Un objet `Blob` représente un objet-fichier de données brutes immuables. Les Blobs représentent des données qui ne sont pas nécessairement dans un format JavaScript natif. L’interface {{ domxref("File") }} se base sur l’objet `Blob`, elle en hérite les fonctionnalités et les étend pour prendre en charge les fichiers du système de l’utilisateur. Pour construire un `Blob`, vous pouvez invoquer le {{domxref("Blob.Blob","constructeur Blob()")}}. -<h2 id="Récupération_d’un_objet_FormData_dans_un_formulaire_HTML">Récupération d’un objet FormData dans un formulaire HTML</h2> +## Récupération d’un objet FormData dans un formulaire HTML -<p>Pour construire un objet <code>FormData</code> contenant les données d’un élément HTML {{ HTMLElement("form") }} existant, spécifiez cet élément lors de la création de l’objet<code> </code>:</p> +Pour construire un objet `FormData` contenant les données d’un élément HTML {{ HTMLElement("form") }} existant, spécifiez cet élément lors de la création de l’objet` `: -<pre class="brush: js">var formData = new FormData(someFormElement); -</pre> +```js +var formData = new FormData(someFormElement); +``` -<p>Par exemple :</p> +Par exemple : -<pre class="brush: js">var formElement = document.querySelector("form"); +```js +var formElement = document.querySelector("form"); var request = new XMLHttpRequest(); request.open("POST", "submitform.php"); request.send(new FormData(formElement)); -</pre> +``` -<p>Vous pouvez également ajouter des données supplémentaires à l’objet <code>FormData</code> entre sa récupération dans un formulaire et son envoi, comme suit :</p> +Vous pouvez également ajouter des données supplémentaires à l’objet `FormData` entre sa récupération dans un formulaire et son envoi, comme suit : -<pre class="brush: js">var formElement = document.querySelector("form"); +```js +var formElement = document.querySelector("form"); var formData = new FormData(formElement); var request = new XMLHttpRequest(); request.open("POST", "submitform.php"); formData.append("serialnumber", serialNumber++); -request.send(formData);</pre> +request.send(formData); +``` -<p>Vous pouvez ainsi ajouter des données au formulaire avant de l’envoyer, pour y inclure des informations supplémentaires que les utilisateurs ne peuvent pas nécessairement modifier.</p> +Vous pouvez ainsi ajouter des données au formulaire avant de l’envoyer, pour y inclure des informations supplémentaires que les utilisateurs ne peuvent pas nécessairement modifier. -<h2 id="Envoi_de_fichiers_via_un_objet_FormData">Envoi de fichiers via un objet FormData</h2> +## Envoi de fichiers via un objet FormData -<p>L’objet <code>FormData</code> vous permet également d’envoyer des fichiers. Il vous suffit d’inclure un élément HTML {{ HTMLElement("input") }} de type <code>file</code> dans votre élément {{htmlelement("form")}} :</p> +L’objet `FormData` vous permet également d’envoyer des fichiers. Il vous suffit d’inclure un élément HTML {{ HTMLElement("input") }} de type `file` dans votre élément {{htmlelement("form")}} : -<pre class="brush: html"><form enctype="multipart/form-data" method="post" name="fileinfo"> - <label>Votre adresse électronique :</label> - <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> - <label>Étiquette du fichier personnalisé :</label> - <input type="text" name="filelabel" size="12" maxlength="32" /><br /> - <label>Fichier à mettre de côté :</label> - <input type="file" name="file" required /> - <input type="submit" value="Mettez le fichier de côté." /> -</form> -<div></div> -</pre> +```html +<form enctype="multipart/form-data" method="post" name="fileinfo"> + <label>Votre adresse électronique :</label> + <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> + <label>Étiquette du fichier personnalisé :</label> + <input type="text" name="filelabel" size="12" maxlength="32" /><br /> + <label>Fichier à mettre de côté :</label> + <input type="file" name="file" required /> + <input type="submit" value="Mettez le fichier de côté." /> +</form> +<div></div> +``` -<p>Vous pouvez ensuite l’envoyer à l’aide du code suivant :</p> +Vous pouvez ensuite l’envoyer à l’aide du code suivant : -<pre class="brush: js">var form = document.forms.namedItem("fileinfo"); +```js +var form = document.forms.namedItem("fileinfo"); form.addEventListener('submit', function(ev) { var oOutput = document.querySelector("div"), @@ -101,29 +106,29 @@ form.addEventListener('submit', function(ev) { if (oReq.status == 200) { oOutput.innerHTML = "Envoyé !"; } else { - oOutput.innerHTML = "Erreur " + oReq.status + " lors de la tentative d’envoi du fichier.<br \/>"; + oOutput.innerHTML = "Erreur " + oReq.status + " lors de la tentative d’envoi du fichier.<br \/>"; } }; oReq.send(oData); ev.preventDefault(); }, false); -</pre> +``` -<div class="note"> -<p><strong>Note :</strong> Si vous passez une référence dans le formulaire, la méthode spécifiée dans ce dernier sera utilisée au lieu de celle définie dans l’appel de la méthode open().</p> -</div> +> **Note :** Si vous passez une référence dans le formulaire, la méthode spécifiée dans ce dernier sera utilisée au lieu de celle définie dans l’appel de la méthode open(). -<p>Vous pouvez également ajouter un objet {{ domxref("File") }} ou {{ domxref("Blob") }} directement dans l’objet {{ domxref("FormData") }} :</p> +Vous pouvez également ajouter un objet {{ domxref("File") }} ou {{ domxref("Blob") }} directement dans l’objet {{ domxref("FormData") }} : -<pre class="brush: js">data.append("myfile", myBlob, "filename.txt"); -</pre> +```js +data.append("myfile", myBlob, "filename.txt"); +``` -<p>Avec la méthode {{domxref("FormData.append","append()")}}, vous pouvez utiliser le troisième paramètre facultatif pour passer un nom de fichier dans l’en-tête <code>Content-Disposition</code> envoyé au serveur. Si aucun nom de fichier n’est spécifié (ou si le paramètre n’est pas pris en charge), le nom « blob » est utilisé.</p> +Avec la méthode {{domxref("FormData.append","append()")}}, vous pouvez utiliser le troisième paramètre facultatif pour passer un nom de fichier dans l’en-tête `Content-Disposition` envoyé au serveur. Si aucun nom de fichier n’est spécifié (ou si le paramètre n’est pas pris en charge), le nom « blob » est utilisé. -<p>Vous pouvez utiliser l’objet <code>FormData</code> avec jQuery si vous définissez les options appropriées :</p> +Vous pouvez utiliser l’objet `FormData` avec jQuery si vous définissez les options appropriées : -<pre class="brush: js">var fd = new FormData(document.querySelector("form")); +```js +var fd = new FormData(document.querySelector("form")); fd.append("CustomField", "Données supplémentaires"); $.ajax({ url: "stash.php", @@ -132,17 +137,15 @@ $.ajax({ processData: false, // dire à jQuery de ne pas traiter les données contentType: false // dire à jQuery de ne pas définir le contentType }); -</pre> +``` -<h2 id="Envoi_de_formulaires_et_de_fichiers_via_AJAX_sans_objet_FormData">Envoi de formulaires et de fichiers via AJAX <em>sans</em> objet <code>FormData</code></h2> +## Envoi de formulaires et de fichiers via AJAX *sans* objet `FormData` -<p>Si vous voulez en savoir plus sur la sérialisation des données et l’envoi d’un formulaire via <a href="/en-US/docs/AJAX">AJAX</a> <em>sans</em> utiliser d’objets FormData, consultez <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">ce paragraph</a>e.</p> +Si vous voulez en savoir plus sur la sérialisation des données et l’envoi d’un formulaire via [AJAX](/en-US/docs/AJAX) *sans* utiliser d’objets FormData, consultez [ce paragraph](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files)e. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li> - <li>{{domxref("HTMLFormElement")}}</li> - <li>{{domxref("Blob")}}</li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Tableaux typés</a></li> -</ul> +- [Utiliser XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) +- {{domxref("HTMLFormElement")}} +- {{domxref("Blob")}} +- [Tableaux typés](/en-US/docs/Web/JavaScript/Typed_arrays) |