Este artículo presenta una breve introducción a la lectura distribuida de archivos HTML5 FileReader y su método, y la comparte con todos. Los detalles son los siguientes:
representaciones
La antigua regla es mostrar primero las representaciones.
Primero introduzca algunos métodos y eventos de FileReader en H5
método de lectura de archivos
| nombre | efecto |
|---|---|
| acerca de() | Terminar la lectura |
| leerAsBinaryString(archivo) | Leer archivo como codificación binaria |
| leer como URL de datos (archivo) | Leer archivo codificado con DataURL |
| readAsText(archivo, [codificación]) | Leer archivo como texto |
| leerAsArrayBuffer(archivo) | Leer archivo en arraybuffer |
Evento lector de archivos
| nombre | efecto |
|---|---|
| inicio de carga | Se dispara cuando comienza la lectura. |
| en progreso | Lectura |
| cargando | Activado por la finalización de la lectura, independientemente del éxito o el fracaso. |
| cargar | Se activa cuando la lectura del archivo se completa correctamente |
| abortar | Activado por interrupción |
| error | Activado por error |
código
La idea central de la lectura distribuida de archivos es dividir el archivo en bloques y leerlos cada M.
parte HTML
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Documento</title></head><body> <form> <fieldset> <legend>Leer paso a paso Archivo:</legend> <tipo de entrada=id de archivo=Archivo> <tipo de entrada=valor del botón=id de interrupción=Abortar> <p> <lable>Leer progreso:</lable> <id de progreso=Progreso valor=0 max=100></progress> </p> </fieldset> </form> <script src=./loadFile.js></script> <script> var progreso = document.getElementById('Progreso' );//Barra de progreso var events = { load: function () { console.log('loaded' }, progreso: function (porcentaje) { console.log(percent.value = porcentaje }, éxito: function () { console.log('success'); } }; var loader // Activa el evento onchange después de seleccionar el archivo para cargar document.getElementById('File').onchange = function (e) { var archivo = this.files[0]; console.log(archivo) //loadFile.js loader = new FileLoader(archivo, eventos }); document.getElementById('Abort').onclick = función () { loader.abort() } </script></body></html>;sección loadFile.js
/** Módulo de lectura de archivos* objeto de archivo de archivo* eventos el objeto de retorno de evento incluye éxito, carga, progreso*/var FileLoader = función (archivo, eventos) { this.reader = new FileReader(); cargado = 0; this.total = file.size; //Lee 1M cada vez this.step = 1024 * 1024 this.events = events {}; //Lee el primer bloque this.readBlob(0); this.bindEvent(); }FileLoader.prototype = { bindEvent: function (eventos) { var _this = this, lector = this.reader = function ( e ) { _this.onLoad(); lector.onprogress = función (e) { _this.onProgress(e.loaded }; , cancelar, las devoluciones de llamada de error no se agregan por el momento}, // El evento de progreso regresa onProgress: function (loaded) { var percent, handler = this.events.progress;//Barra de progreso this.loaded += cargado; = (this. cargado / this.total) * 100; handler && handler(percent); //Fin de la lectura (llamada al final de cada ejecución de lectura, no en su totalidad) onLoad: function () { var handler = this.events.load; // Los datos leídos deben enviarse aquí handler && handler(this.reader.result); // Si la lectura no se completa, continúe leyendo if (this.loaded < this.total) { this.readBlob(this.loaded); } else { // Lectura completada this.loaded = this.total // Si el éxito regresa, ejecute this.events.success && this.events.success(); } }, // Lee el contenido del archivo readBlob: function (start) { var blob, file = this.file; // Si se admite el método de corte, lea en pasos, si no, una vez Leer si (archivo.slice) { blob = file.slice(inicio, inicio + this.step } else { blob = archivo } this.reader.readAsText }, // Cancelar la lectura: function () { var lector = this.reader; if(reader) { lector.abort();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.