API de archivo

Internet Explorer 10 y las aplicaciones de la Tienda Windows con JavaScript admiten la API de archivo. La API de archivo es un borrador de especificación web del World Wide Web Consortium (W3C) para representar objetos de archivo en aplicaciones web, así como para seleccionarlos mediante programación y obtener acceso a sus datos. El grupo de trabajo de aplicaciones web del W3C está normalizando la API de archivo en estos momentos. Con la API de archivo, los desarrolladores web pueden obtener acceso a archivos locales en el equipo cliente de manera segura sin necesidad de extensiones ni complementos.

Experiencias de carga de archivo sin problemas

La API de archivo permite que un explorador o una aplicación lea y manipule archivos, pero solo si el usuario proporciona permisos para hacerlo. Además, la API de archivo permite experiencias de carga de archivo más eficaces sin complementos.

En el siguiente ejemplo de API de archivo del W3C, diferentes bloques de código controlan las condiciones de progreso, error y éxito:


function startRead() {
  // Obtain input element through DOM.

  var file = document.getElementById('file').files[0];
  if(file) {
    getAsText(file);
  }
}

function getAsText(readFile) {

  var reader = new FileReader();

  // Read file into memory as UTF-16      
  reader.readAsText(readFile, "UTF-16");

  // Handle progress, success, and errors
  reader.onprogress = updateProgress;
  reader.onload = loaded;
  reader.onerror = errorHandler;
}

function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded and evt.total are ProgressEvent properties.
    var loaded = (evt.loaded / evt.total);

    if (loaded < 1) {
      // Increase the progress bar length.
      // style.width = (loaded * 200) + "px";
    }
  }
}

function loaded(evt) {  
  // Obtain the read file data.    
  var fileString = evt.target.result;

// Handle UTF-16 file dump
  if(utils.regexp.isChinese(fileString)) {
    //Chinese Characters + name validation.
  }
  else {
    // Run other charset test.
  }
  // xhr.send(fileString)     
}

function errorHandler(evt) {
  if(evt.target.error.name == "NotReadableError") {
    // The file could not be read.
  }
}


Constructor de blob

El constructor de Blob permite a un desarrollador web crear o manipular un blob (por lo general, equivalente a un archivo) directamente en el cliente. El constructor se define en la especificación API de archivo del W3C, que en estos momentos está en la fase de borrador de trabajo.

En versiones anteriores de la API de archivo podías leer archivos pero no editarlos directamente en el cliente. Podías realizar cambios en una representación del archivo, pero guardar esos cambios requería cargar el archivo y las ediciones al servidor, procesarlo todo en el servidor y, después, descargar el archivo modificado. Con el constructor de Blob, puedes crear fácilmente un Blob desde una matriz. La matriz puede incluir otros objetos Blob, cadenas de texto o búferes de matriz, y la matriz se pasa al blob como un parámetro cuando se crea.

Se puede agregar un objeto de diccionario opcional como segundo parámetro, y puede incluir dos miembros: type y endings.

En el siguiente ejemplo (para Internet Explorer 10 o posterior), se demuestra este proceso de manera concisa:


<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Saving Files Locally</title>
</head>

<body>
  <h1>Saving Files Locally</h1>
  <script>
    //check for Blob availability
    if (typeof Blob !== "undefined") {
      demoBlobs();
    } else {
      //your fallback code here
    }

    function demoBlobs(){  
      //create a Blob with an array and the optional dictionary object.
      var blob1 = new Blob(
        ["There are 10 kinds of people ", "in the world.\r\n"], //array
        { type: "text/plain", endings: "native" } //dictionary object
      );

      //create a second blob that uses the first blob in its array
      var blob2 = new Blob([blob1, "Those who understand binary and those who don't."]);

      // Save the blob1 content to a file, giving just a "Save" option
      window.navigator.msSaveBlob(blob1, 'msSaveBlob_testFile.txt'); 
      alert('File saved using msSaveBlob() - note the single "Save" button below.');
  
      // Save the blob2 content to a file, giving both "Save" *and* "Open" options
      window.navigator.msSaveOrOpenBlob(blob2, 'msSaveBlobOrOpenBlob_testFile.txt'); 
      alert('File saved using msSaveOrOpenBlob() - note the two "Open" and "Save" buttons below.');
    }
  </script>
</body>

</html>


Los métodos msSaveBlob() y msSaveOrOpenBlob() permiten al usuario guardar el Blob en el equipo del usuario como si fuera un archivo que descarga de Internet. Estos archivos se guardan en la carpeta de descargas de forma predeterminada.

La diferencia entre msSaveBlob() y msSaveOrOpenBlob() es que el método msSaveBlob() solo proporciona un botón Guardar al usuario. El método msSaveOrOpenBlob() proporciona un botón Guardar y un botón Abrir. La ejecución del código de ejemplo mencionado (en Internet Explorer 10 o posterior) aclarará esta diferencia.

Otras mejoras

Entre otras mejores relacionadas con archivos, se incluye las carga de varios archivos (4 GB por archivo) con filtrado de tipos de archivo. En el siguiente ejemplo, el usuario puede seleccionar varios archivos con formato de intercambio de gráficos (GIF) o archivos JPEG.


<input type="file" name="pic" multiple accept="image/gif, image/jpeg" />

Para más información, consulta la sección sobre el "estado de carga de archivo (tipo=archivo)" de la especificación HTML5.

Referencia de API

File API

Ejemplos y tutoriales

Cómo administrar archivos locales

Demostraciones de la versión de prueba de Internet Explorer

BlobBuilder
Binary File Inspector

Publicaciones de IEBlog

Nuevo constructor de blob en IE10
Crear archivos con BlobBuilder
HTML5, listo para sitio y experimental
Trabajar con datos binarios mediante matrices tipadas

Especificación

API de archivo

Temas relacionados

Cargas y descargas con la API de archivo

 

 

Mostrar:
© 2014 Microsoft