Exemplos de uso da API de arquivo HTML5 para ler arquivos locais (como imagens, PDF, etc.)

Na era do HTML4, se quisermos apresentar a imagem local de um usuário em uma página da web, o usuário precisa primeiro fazer o upload da imagem para o servidor e, em seguida, fazer o download da imagem de acordo com o endereço da imagem fornecido pelo servidor antes que a imagem possa ser exibido na página da web. Essas idas e vindas custaram pelo menos o dobro do tráfego desta imagem, sem mencionar os recursos gastos pelo servidor para armazenar esta imagem e o custo injusto do usuário enviar a imagem errada (porque na era HTML4, os usuários escolhem Depois de enviar uma imagem, muitas vezes você só pode ver o nome do arquivo da imagem, mas não pode confirmar se a imagem é aquela que você deseja carregar, visualizando-a).

HTML5 fornece uma nova maneira de jogar. Somente com o navegador, você pode renderizar, ler e processar arquivos locais (na verdade, também podem ser remotos) (principalmente imagens), e tudo isso é feito por meio da API de arquivo HTML5. alcançar.

A primeira é a estrutura de dados que o HTML5 define um tipo de objeto de arquivo para representar arquivos, e cada objeto de arquivo corresponde a um arquivo. O objeto de arquivo possui três atributos: nome, tamanho e tipo. nome é o nome do arquivo sem caminho, tamanho é o tamanho do arquivo em bytes e tipo é o MIME do arquivo (como imagem/jpg).

O objeto arquivo não existe sozinho, mas na forma de um array, em um array chamado FileList. Então, como obter esse array FileList? Atualmente, o HTML5 tem duas maneiras de obter FileList, uma é por meio da entrada do tipo de arquivo e a outra é por meio do evento drop da operação arrastar e soltar.

Obtenha FileList através da entrada do tipo de arquivo

 <id de entrada=tipo de entrada de arquivo=arquivo />

Ou o novo atributo múltiplo em HTML5 que permite a seleção múltipla de arquivos:

 <id de entrada=tipo de entrada de arquivo=arquivo múltiplo />

Geralmente, anexamos um evento onchange a input:file para que, após o usuário selecionar o arquivo, as próximas etapas, como a leitura do arquivo, possam ser executadas imediatamente:

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

Primeiro, defina uma área para arrastar e soltar:

 <div id=dropbox style=largura: 200px;altura: 200px;></div>

Além disso, para acionar o evento drop, devemos evitar o comportamento padrão dos eventos dragenter e dragover:

 var dropbox;dropbox = document.getElementById(dropbox);dropbox.addEventListener(dragenter, dragenter, false);dropbox.addEventListener(dragover, dragover, false);dropbox.addEventListener(drop, drop, false);função dragenter(e) { e.stopPropagation(); e.preventDefault();}função dragover(e) { e.stopPropagation();

Então, podemos obter o fileList no retorno de chamada do evento drop:

 função drop(e) { e.stopPropagation(); e.preventDefault();

HTML5 oferece duas soluções: FileReader e ObjectUrl.

Primeiro você precisa instanciar o objeto FileReader:

 var leitor = new FileReader();

Usar o FileReader para ler objetos de arquivo é um processo assíncrono. Precisamos primeiro definir o retorno de chamada do evento de carregamento para FileReader para informar ao FileReader quais operações adicionais ele deve executar após ler os dados do objeto de arquivo:

 leitor.onload = function(e) { document.getElementById(image).src = e.target.result };

O significado do código acima é que depois que o FileReader lê os dados da imagem, ele coloca os dados (DataUrl) no atributo src.

Finalmente, os diferentes métodos de FileReader são usados ​​para decidir qual formato de dados usar para armazenar os dados do objeto de arquivo após lê-los e implementar a leitura:

1. readAsArrayBuffer(file): Leia o objeto arquivo e armazene-o como um objeto ArrayBuffer (ainda não descobri o que é o objeto ArrayBuffer, deve ser uma estrutura de dados gerada para acesso eficiente aos dados).
2. readAsText(file [, 'UTF-8']): Lê o objeto arquivo em modo de texto geral. É importante notar que o segundo parâmetro (opcional) pode ser usado para especificar a codificação de caracteres.
3. readAsDataURL(file): Leia o objeto de arquivo e armazene-o como uma string no formato data: URL.

ObjectURL é equivalente a um caminho temporário para o arquivo. Este caminho temporário pode ser gerado e liberado a qualquer momento. Quando usado no navegador local, não é diferente de um URL comum.

Considere a exibição de uma imagem local na página como exemplo:

 var img = document.createElement(img);img.src = window.URL.createObjectURL(arquivo);

Neste momento, src se parece com: blob:http://test.local.com/e03e8bbf-66ce-4fea-a8c8-772f9fdb4d40

Usar este src permite que o navegador leia imagens localmente.

Comparado com o uso do FileReader para gerar a codificação base64 da imagem e colocá-la no src, o desempenho desta solução foi bastante melhorado.

Comparando essas duas soluções para leitura de objetos File, FileReader é adequado para fazer upload de arquivos, enquanto ObjectURL é adequado para operar diretamente no navegador e, em seguida, fazer upload dos dados processados ​​​​após a operação, como usar canvas para fazer capturas de tela ou realizar compactação de imagem, etc. . Claro, tudo isso depende da compatibilidade.

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.