Usando Objetos FormData

Los objetosFormData le permiten compilar un conjunto de pares clave/valor para enviar medianteXMLHttpRequest. Están destinados principalmente para el envío de los datos del formulario, pero se pueden utilizar de forma independiente con el fin de transmitir los datos tecleados. Los datos transmitidos estarán en el mismo formato que usa el métodosubmit() del formulario para enviar los datos si el tipo de codificación del formulario se establece en "multipart/form-data".

Creación de un objeto FormData desde cero

Usted mismo puede construir un objetoFormData instanciándolo y después añadiendo campos a la instancia usando su métodoappend() , tal y como se muestra:

var formData = new FormData();formData.append("username", "Groucho");formData.append("accountnum", 123456); // number 123456 is immediately converted to string "123456"// HTML file input user's choice...formData.append("userfile", fileInputElement.files[0]);// JavaScript file-like object...var content = '<a><b>hey!</b></a>'; // the body of the new file...var blob = new Blob([content], { type: "text/xml" });formData.append("webmasterfile", blob);var request = new XMLHttpRequest();request.open("POST", "http://foo.com/submitform.php");request.send(formData);

Nota:Los campos "userfile" y "webmasterfile" contienen ambos un archivo. El número asignado al campo "accountnum" es inmediatamente convertido a string por el métodoFormData.append() (el valor del campo puede ser unBlob,File, o una cadena de texto;si el valor no es ni un Blob, ni un File, será convertido a un string).

Este ejemplo construye una instancia deFormData que almacenará los valores de los campos "username", "accountnum", "userfile" y "webmasterfile", entonces usará el métodosend() deXMLHttpRequest para enviar los datos del formulario. El campo "webmasterfile" es unBlob. Un objetoBlob representa un objeto de tipo similar a un fichero que es inalterable y que almacenará datos en formato raw. Los Blobs representan datos que no necesariamente tendrán un formato Javascript nativo. La interfazFile está basada enBlob, y hereda su funcionalidad y la amplía para dar soporte a archivos que estén en el sistema del usuario. Para construir unBlob, puede invocaral constructor del objeto Blob.

Recuperando un objeto FormData de un formulario HTML

Para construir un objetoFormData que contenga los datos de un<form> existente, especifique ese elemento form cuando cree el objetoFormData:

var formData = new FormData(someFormElement);

Por ejemplo:

var formElement = document.getElementById("myFormElement");var request = new XMLHttpRequest();request.open("POST", "submitform.php");request.send(new FormData(formElement));

También puede añadir datos adicionales al objetoFormData antes de enviarlo. Así:

var formElement = document.getElementById("myFormElement");formData = new FormData(formElement);formData.append("serialnumber", serialNumber++);request.send(formData);

Esto le permite aumentar los datos del formulario antes de enviarlos para incluir información adicional que no necesariamente debiera ser editable por el usuario en el formulario.

Enviando archivos usando objetos FormData

También puede enviar archivos usandoFormData. Simplemente incluye un elemento<input> de tipoFile:

html

<form enctype="multipart/form-data" method="post" name="fileinfo">  <label>Your email address:</label>  <input    type="email"    autocomplete="on"    autofocus    name="userid"    placeholder="email"    required    size="32"    maxlength="64" /><br />  <label>Custom file label:</label>  <input type="text" name="filelabel" size="12" maxlength="32" /><br />  <label>File to stash:</label>  <input type="file" name="file" required />  <input type="submit" value="Stash the file!" /></form><div></div>

Luego puede enviarlo usando código como el siguiente:

var form = document.forms.namedItem("fileinfo");form.addEventListener(  "submit",  function (ev) {    var oOutput = document.getElementById("output"),      oData = new FormData(document.forms.namedItem("fileinfo"));    oData.append("CustomField", "This is some extra data");    var oReq = new XMLHttpRequest();    oReq.open("POST", "stash.php", true);    oReq.onload = function (oEvent) {      if (oReq.status == 200) {        oOutput.innerHTML = "Uploaded!";      } else {        oOutput.innerHTML =          "Error " + oReq.status + " occurred uploading your file.<br />";      }    };    oReq.send(oData);    ev.preventDefault();  },  false,);

Nota:El método especificado en el formulario será usado por encima del método utilizado en en la llamada a open().

También puede añadir unFile o unBlob directamente al objetoFormData de la siguiente manera:

data.append("myfile", myBlob, "filename.txt");

Cuando se usa el métodoappend es posible usar, de manera opcional, un tercer parámetro para pasarle un nombre de fichero dentro de la cabeceraContent-Disposition que será enviada al servidor. Cuando no se especifica (o el parámetro no es soportado), el nombre "blob" es el que será utilizado.

Además, puede usar FormData con jQuery si asigna las opciones correctas:

var fd = new FormData(document.getElementById("fileinfo"));fd.append("CustomField", "This is some extra data");$.ajax({  url: "stash.php",  type: "POST",  data: fd,  processData: false, // tell jQuery not to process the data  contentType: false, // tell jQuery not to set contentType});