HTML5 Atualização do código de download Código da instância

A API de arquivo fornecida no HTML5 possui uma riqueza de aplicativos no front end. E a compatibilidade de cada navegador também é melhor, incluindo o terminal móvel, exceto pelo IE, suporta apenas a versão do IE10 ou superior. Se você deseja dominar melhor a função do arquivo de operação, primeiro familiarize cada API.

O rótulo de entrada [type = arquivo] no HTML possui um atributo múltiplo, permitindo que os usuários escolham vários arquivos, e o objeto Filelist significa uma lista de arquivos selecionados pelo usuário. Cada arquivo nesta lista é um objeto de arquivo.

1. O atributo do objeto de arquivo:
2. Nome: Nome do arquivo, não inclui caminhos.
3. Tipo: Tipo de arquivo. Os arquivos do tipo de arquivo começarão com a imagem/, que podem ser limitados ao upload da imagem.
4. Tamanho: Tamanho do arquivo. Outras operações podem ser executadas de acordo com o tamanho do arquivo.
5. LastModify: o tempo final de modificação do arquivo.

 <Tipo de entrada = ID do arquivo = Arquivos múltiplos> <Script> var elem = document.getElementById ('arquivos'); são imagens e o tamanho do arquivo é inferior a 200kb if (arquivos [i] .type.indexof ('image/')! == -1 && files [i] .size <204800) {console.log (arquivos [i] .Name);}}} </sCript>

Existe um atributo de acesso na entrada que pode ser usado para especificar o tipo de arquivo que pode ser enviado por upload do arquivo.

Aceitar = imagem/* pode ser usado para limitar apenas para fazer upload de formatos de imagem. No entanto, há um problema com a resposta lenta no navegador Webkit.

A solução é alterar a passagem* para o tipo MIME especificado.

 <entrada de entrada = arquivo aceit = imagem/gif, imagem/jpeg, imagem/jpg, imagem/png>

O objeto BLOB é equivalente a um contêiner que pode ser usado para armazenar dados binários. Possui dois atributos, o atributo de tamanho representa o comprimento do byte e o atributo de tipo representa o tipo MIME.

Como criar

O objeto BLOB pode ser criado usando a função de construção BLOB ().

 var blob = new Blob (['hello'], {type: text/plana});

O primeiro parâmetro no construtor BLOB é uma matriz que pode armazenar objetos ArrayBuffer, objetos ArrayBufferView, objetos BLOB e String.

O objeto BLOB pode retornar um novo objeto BLOB através do método Slice ().

 var newblob = blob.slice (0,5, {type: text/planing});

O método slice () usa três parâmetros, todos opcionais. O primeiro parâmetro representa a posição inicial dos dados binários no objeto BLOB, o segundo parâmetro representa o final da replicação e o terceiro parâmetro é o tipo MIME do objeto BLOB.

Canvas.toblob () também pode criar objetos BLOB. O TobBlob () usa três parâmetros, o primeiro é a função de retorno de chamada, o segundo é o tipo de imagem, o padrão é a imagem/png, a terceira é a qualidade da imagem, o valor está entre 0 e 1.

 var canvas = document.getElementById ('Canvas');

Os objetos Blod podem gerar um endereço de rede através do objeto Window.url, combinado com o atributo de download da tag A para obter a função de arquivo de download.

Por exemplo, faça o download da tela como um arquivo de imagem.

 var canvas = document.getElementById ('tela'); var url = url.createObject "blob); var a = document.createElement ('a'); A.Download = 'Canvas'; A.Href = url; // simula uma tag para baixar A.Click (); / Diga ao navegador após o download.

A sequência também pode ser salva como um arquivo de texto com um método semelhante.

O objeto FileReader é usado principalmente para ler o arquivo na memória e ler os dados no arquivo. Crie um objeto FileReader construindo uma função

 var leitor = new fileReReader ();

O objeto tem os seguintes métodos:

1. Aborte: interromper a operação de leitura.
2. ReadaSarrayBuffer: Leia o conteúdo do arquivo no objeto ArrayBuffer.
3. ReadaSbinaryString: Leia os arquivos como dados binários.
4. READASDATAURL: Leia o arquivo como um formato de dados: URL.
5. Destatext: Leia os arquivos como texto.

O aplicativo comum é exibir a imagem através do readaDataurl () depois de fazer o upload de imagens no cliente.

 <INPUT TIPO = ID do arquivo = Arquivos aceita = imagem/jpeg, imagem/jpg, imagem/png> <img src = em branco.gif id = visualize> <cript> var elem = d ('arquivos'), img = document. GetElementById ('visualização'); .src = ev.target.result;} reader.readasDataurl (arquivos [0]);}} </script>

No entanto, quando você tira fotos em alguns telefones celulares, haverá bugs ao fazer o upload de fotos e as fotos serão encontradas, incluindo Samsung e iPhone. Essência Essência A solução não explica aqui.

Destatext () do objeto FileReader pode ler o texto do arquivo, combinado com a função do objeto BLOB para baixar o arquivo, o arquivo de exportação de dados é backup na área local. Através da entrada e use a DREATEXT () para usar o dolatext () Leia o texto e a restauração de dados.

O código é semelhante à função acima.

Os métodos ATOB e BTOA são adicionados ao HTML5 para suportar a codificação BASE64. A nomeação deles também é muito simples.

 var a = https: //lin-xin.github.io; iconsole.log (b);

O método BTOA codifica a sequência A, que não alterará o valor de A, e retornará um valor após uma codificação.

O método ATOB decodifica a sequência codificada.

No entanto, os chineses nos parâmetros excederam o intervalo de caracteres da codificação ASCII de 8 bits e o navegador relatará um erro. Portanto, você precisa codificar o codeuricomponent primeiro.

 var a = Hello World;

O acima é todo o conteúdo deste artigo.