Ejemplos de uso de la API de archivos html5 para leer archivos locales (como imágenes, PDF, etc.)

En la era de HTML4, si queremos presentar la imagen local de un usuario en una página web, el usuario primero debe cargar la imagen en el servidor y luego descargarla de acuerdo con la dirección de la imagen proporcionada por el servidor antes de que la imagen pueda ser mostrado en la página web. Este ida y vuelta ha costado al menos el doble del tráfico de esta imagen, sin mencionar los recursos gastados por el servidor para almacenar esta imagen y el costo injusto de que el usuario cargue la imagen incorrecta (porque en la era HTML4, los usuarios eligen Después de cargar una imagen, a menudo solo puede ver el nombre del archivo de la imagen, pero no puede confirmar si la imagen es la que desea cargar al obtener una vista previa de ella).

HTML5 proporciona una nueva forma de jugar. Solo con el navegador, puedes renderizar, leer y procesar archivos locales (en realidad, también pueden ser remotos) (principalmente imágenes), y todo esto se hace a través de la API de archivos HTML5. lograr.

El primero es la estructura de datos. HTML5 define un tipo de objeto de archivo para representar archivos, y cada objeto de archivo corresponde a un archivo. El objeto de archivo tiene tres atributos: nombre, tamaño y tipo. nombre es el nombre del archivo sin ruta, tamaño es el tamaño del archivo en bytes y tipo es el MIME del archivo (como imagen/jpg).

El objeto de archivo no existe solo, sino en forma de matriz, en una matriz denominada FileList. Entonces, ¿cómo obtener esta matriz FileList? Actualmente, HTML5 tiene dos formas de obtener FileList, una es mediante la entrada del tipo de archivo y la otra es mediante el evento de colocación de la operación de arrastrar y soltar.

Obtenga FileList mediante la entrada del tipo de archivo

 <id de entrada=archivo-tipo de entrada=archivo />

O el nuevo atributo múltiple en HTML5 que permite la selección de múltiples archivos:

 <id de entrada=tipo de entrada de archivo=archivo múltiple />

Generalmente, adjuntamos un evento onchange a input:file para que después de que el usuario seleccione el archivo, los siguientes pasos, como leer el archivo, se puedan realizar inmediatamente:

 //Jsvar nativo inputElement = document.getElementById(file-input);inputElement.addEventListener(change, handleFiles, false);function handleFiles() { var fileList = this.files }//jquery version$('#file-input; ').on('cambiar', función() { var fileList = this.files;});

Primero, establezca un área para arrastrar y soltar:

 <div id=estilo dropbox=ancho: 200px;alto: 200px;></div>

Además, para activar el evento de caída, debemos evitar el comportamiento predeterminado de los eventos dragenter y dragover:

 var dropbox;dropbox = document.getElementById(dropbox);dropbox.addEventListener(dragenter, dragenter, false);dropbox.addEventListener(dragover, dragover, false);dropbox.addEventListener(soltar, soltar, false);función dragenter(e) { e.stopPropagation(); e.preventDefault();}función dragover(e) { e.stopPropagation(); e.preventDefault();}

Luego, podemos obtener la lista de archivos en la devolución de llamada del evento de colocación:

 función soltar(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer = dt.files(archivos);}

HTML5 proporciona dos soluciones: FileReader y ObjectUrl.

Primero necesitas crear una instancia del objeto FileReader:

 var lector = nuevo FileReader();

Usar FileReader para leer objetos de archivo es un proceso asincrónico. Primero debemos configurar la devolución de llamada del evento de carga para FileReader para indicarle a FileReader qué operaciones adicionales debe realizar después de leer los datos del objeto de archivo:

 lector.onload = función(e) { document.getElementById(imagen).src = e.target.result }

El significado del código anterior es que después de que FileReader lee los datos de la imagen, coloca los datos (DataUrl) en el atributo src.

Finalmente, los diferentes métodos de FileReader se utilizan para decidir qué formato de datos usar para almacenar los datos del objeto de archivo después de leerlo e implementar la lectura:

1. readAsArrayBuffer (archivo): lee el objeto de archivo y lo almacena como un objeto ArrayBuffer (aún no he descubierto qué es el objeto ArrayBuffer, debería ser una estructura de datos generada para un acceso eficiente a los datos).
2. readAsText(file [, 'UTF-8']): lee el objeto de archivo en modo de texto general. Vale la pena señalar que el segundo parámetro (opcional) se puede usar para especificar la codificación de caracteres.
3. readAsDataURL (archivo): lee el objeto de archivo y lo almacena como una cadena en datos: formato URL.

ObjectURL es equivalente a una ruta temporal al archivo. Esta ruta temporal se puede generar y publicar en cualquier momento cuando se usa en el navegador local y no es diferente de una URL normal.

Tomemos como ejemplo la visualización de una imagen local en la página:

 var img = document.createElement(img);img.src = ventana.URL.createObjectURL(archivo);

En este momento, src se ve así: blob:http://test.local.com/e03e8bbf-66ce-4fea-a8c8-772f9fdb4d40

El uso de este src permite que el navegador lea imágenes localmente.

En comparación con el uso de FileReader para generar la codificación base64 de la imagen y colocarla en src, el rendimiento de esta solución ha mejorado enormemente.

Comparando estas dos soluciones para leer objetos de Archivo, FileReader es adecuado para cargar archivos, mientras que ObjectURL es adecuado para operar directamente en el navegador y luego cargar los datos procesados ​​después de la operación, como usar lienzo para tomar capturas de pantalla o realizar compresión de imágenes, etc. . Por supuesto, todo esto depende de la compatibilidad.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.