HTML5 ofrece una forma estándar de interactuar con
archivos locales a través de la especificación del API de
archivos. El API de archivos
se puede utilizar, por ejemplo, para crear una vista previa en miniatura de
imágenes mientras se envían al servidor o para permitir que una aplicación
guarde una referencia de un archivo mientras el usuario está sin conexión.
También se podría utilizar lógica de cliente para verificar si el tipo MIME de
un archivo subido coincide con la extensión del archivo o para restringir el
tamaño de una subida.
A continuación se indican las interfaces que ofrece la
especificación para acceder a archivos desde un sistema de archivos
"local".
File: representa un archivo individual que
proporciona información de solo lectura (por ejemplo, el nombre, el tamaño del
archivo, el tipo MIME y una referencia al control del archivo).
FileList: representa una secuencia de conjunto de
objetos File (tanto la secuencia <input type="file"
multiple> como arrastrar un directorio de archivos desde el escritorio
se consideran ejemplos de esta interfaz).
Blob: permite fragmentar un archivo en intervalos
de bytes.
Cuando se utiliza junto con las estructuras de datos
anteriores, la interfaz de FileReader se puede utilizar para leer un archivo de forma
asíncrona mediante el control de eventos de JavaScript. Por lo tanto, se puede
controlar el progreso de una lectura, detectar si se han producido errores y
determinar si ha finalizado una carga. El modelo de evento de XMLHttpRequest guarda muchas semejanzas con las API.
Cómo leer
archivos
Después de obtener una referencia de File, crea instancias de un objeto FileReader para leer su contenido en memoria. Cuando
finaliza la carga, se activa el evento onload del lector y se puede utilizar su atributo result para acceder a los datos del archivo.
A continuación se indican las cuatro opciones de
lectura asíncrona de archivo que incluye FileReader.
· FileReader.readAsBinaryString(Blob|File):
la propiedad resultcontendrá los datos del archivo/objeto BLOB en forma de
cadena binaria. Cada byte se representa con un número entero comprendido entre
0 y 0,255, ambos incluidos.
· FileReader.readAsText(Blob|File,
opt_encoding): la propiedad result contendrá los datos del
archivo/objeto BLOB en forma de cadena de texto. De forma predeterminada, la
cadena se decodifica con el formato "UTF-8". Utiliza el parámetro de
codificación opcional para especificar un formato diferente.
· FileReader.readAsDataURL(Blob|File): la
propiedad resultcontendrá los datos del archivo/objeto BLOB codificados
como una URL de datos.
· FileReader.readAsArrayBuffer(Blob|File): la
propiedad resultcontendrá los datos del archivo/objeto BLOB como un
objeto ArrayBuffer.
Una vez que se ha activado uno de estos métodos de
lectura en el objeto FileReader,
se pueden utilizar los eventos onloadstart, onprogress, onload, onabort, onerror y onloadend para realizar un seguimiento de su progreso.
En el ejemplo que se muestra a continuación, se
excluyen las imágenes de los elementos seleccionados por el usuario, se
activa reader.readAsDataURL() en el archivo y se muestra una miniatura
estableciendo una URL de datos como valor del atributo "src".
DEMOSTRACIÓN
Al
dar click en OK, En el espacio de nombre del proyecto damos click derecho y
seleccionamos Add à
New Items
En
la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos como
nombre del archivo “FileData.html”, para luego presionar el botón Add.
En
el Encabezado de nuestra página <HEAD></HEAD>, vamos a escribir el
título correspondiente:
Y en el cuerpo <BODY></BODY>, lo siguiente
En
el panel de proyecto le damos click a nuestra página, en este caso
“FileData.html”, le damos click derecho al mouse y seleccionamos la opción Set
As Star Page
Y al desplegar nuestra página web:
Al dar click en botón examinar, se nos despliega la ventana donde buscamos
la imagen correspondiente para insertarla.
