Este artigo apresenta uma breve introdução à leitura distribuída de arquivos do HTML5 FileReader e seu método, e o compartilha com todos. Os detalhes são os seguintes:
renderizações
A regra antiga é mostrar as renderizações primeiro.
Primeiro apresente alguns métodos e eventos do FileReader em H5
Método FileReader
| nome | efeito |
|---|---|
| sobre() | Terminar a leitura |
| readAsBinaryString(arquivo) | Ler arquivo como codificação binária |
| readAsDataURL(arquivo) | Ler o arquivo como DataURL codificado |
| readAsText(arquivo, [codificação]) | Ler arquivo como texto |
| readAsArrayBuffer(arquivo) | Ler arquivo em arraybuffer |
FileReaderEvent
| nome | efeito |
|---|---|
| onloadstart | Dispara quando a leitura começa |
| em progresso | Leitura |
| onloadend | Acionado pela conclusão da leitura, independentemente do sucesso ou falha |
| carregar | Acionado quando a leitura do arquivo é concluída com êxito |
| abortar | Acionado na interrupção |
| um erro | Acionado por erro |
código
A ideia central da leitura distribuída de arquivos é dividir o arquivo em blocos e lê-los a cada M.
Parte HTML
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Documento</title></head><body> <form> <fieldset> <legend>Leia passo a passo Arquivo:</legend> <input type=file id=Arquivo> <input type=button value=interrupt id=Abort> <p> <lable>Progresso de leitura:</lable> <progress id=Progress value=0 max=100></progress> </p> </fieldset> </form> <script src=./loadFile.js></script> <script> var progress = document.getElementById('Progress' );//Barra de progresso var events = { load: function () { console.log('loaded' }, progress: function (porcentagem) { console.log(porcentagem); sucesso: function () { console.log('success' } }); var loader; // Aciona o evento onchange após selecionar o arquivo para fazer upload document.getElementById('File').onchange = function (e) { var. arquivo = this.files[0]; console.log(arquivo) //loadFile.js carregador = novo FileLoader(arquivo, eventos }); document.getElementById('Abort').onclick = function () { loader.abort() } </script></body></html>;seção loadFile.js
/** Módulo de leitura de arquivo* objeto de arquivo de arquivo* eventos objeto de retorno de evento inclui sucesso, carregamento, progresso*/var FileLoader = function (file, events) { this.reader = new FileReader(); carregado = 0; this.total = file.size; //Ler 1M cada vez this.step = 1024 * 1024; //Leia o primeiro bloco this.readBlob(0); this.bindEvent(); }FileLoader.prototype = { bindEvent: function (events) { var _this = this, reader = this.reader = function ( e ) { _this.onLoad(); leitor.onprogress = function (e) { _this.onProgress(e.loaded }); , abortar, retornos de chamada de erro não são adicionados por enquanto}, // O evento de progresso retorna onProgress: function (loaded) { var percent, handler = this.events.progress;//Progress bar this.loaded += percentual carregado; = (this. carregado / this.total) * 100; handler && handler(percent }, //Fim da leitura (chamado no final de cada execução de leitura, não na totalidade) onLoad: function () { var handler = this.events.load; // Os dados lidos devem ser enviados aqui handler && handler(this.reader.result); // Se a leitura não for concluída, continue lendo if (this.loaded < this.total) { this.readBlob(this.loaded); else { // Leitura concluída this.loaded = this.total; // Se o sucesso retornar, execute this.events.success &&; this.events.success(); } }, // Leia o conteúdo do arquivo readBlob: function (start) { var blob, file = this.file; uma vez Leia if (file.slice) { blob = file.slice(start, start + this.step } else { blob = file } this.reader.readAsText(blob }); Abortar leitura abortar: function () { var reader = this.reader; if(reader) { reader.abort();O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.