Usando Objetos FormData

Los objetos FormData le permiten compilar un conjunto de pares clave/valor para enviar mediante XMLHttpRequest. Estn destinados principalmente para el envo de los datos del formulario, pero se pueden utilizar de forma independiente con el fin de transmitir los datos tecleados. Los datos transmitidos estarn en el mismo formato que usa el mtodo submit() del formulario para enviar los datos si el tipo de codificacin del formulario se establece en "multipart/form-data".

Creacin de un objeto FormData desde cero

Usted mismo puede construir un objeto FormData instancindolo y despus aadiendo campos a la instancia usando su mtodo append() , 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 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);

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 nmero asignado al campo "accountnum" es inmediatamente convertido a string por el mtodo FormData.append() (el valor del campo puede ser un Blob, 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 de FormData que almacenar los valores de los campos "username", "accountnum", "userfile" y "webmasterfile", entonces usar el mtodo send() de XMLHttpRequest para enviar los datos del formulario. El campo "webmasterfile" es un Blob. Un objeto Blob 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 tendrn un formato Javascript nativo. La interfaz File est basada en Blob, y hereda su funcionalidad y la ampla para dar soporte a archivos que estn en el sistema del usuario. Para construir un Blob, puede invocar al constructor del objeto Blob.

Recuperando un objeto FormData de un formulario HTML

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

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

Tambin puede aadir datos adicionales al objeto FormData 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 informacin adicional que no necesariamente debiera ser editable por el usuario en el formulario.

Enviando archivos usando objetos FormData

Tambin puede enviar archivos usando FormData. Simplemente incluye un elemento <input> de tipo File:

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 id="output"></div>

Luego puede enviarlo usando cdigo 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 mtodo especificado en el formulario ser usado por encima del mtodo utilizado en en la llamada a open().

Tambin puede aadir un File o un Blob directamente al objeto FormData de la siguiente manera:

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

Cuando se usa el mtodo append es posible usar, de manera opcional, un tercer parmetro para pasarle un nombre de fichero dentro de la cabecera Content-Disposition que ser enviada al servidor. Cuando no se especifica (o el parmetro no es soportado), el nombre "blob" es el que ser utilizado.

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