A interface do arquivo html5 usa arquivos para baixar na página da web

A interface do arquivo fornece informações relacionadas aos arquivos e executa JavaScript na página da web para acessar o conteúdo do arquivo.

O objeto de arquivo vem do objeto Filelist retornado pelo usuário para selecionar o arquivo com a tag de entrada, no objeto Datatransfer da operação de arrastar e soltar. O objeto de arquivo é um blob especial que pode ser usado em qualquer contexto que possa ser usado no BLOB.

Para usar os arquivos na página da web, os objetos que geralmente precisam estar envolvidos são: Objeto de arquivo, objeto Filelist, objeto FileReader.

A lista de fileiras vem de dois lugares, a propriedade de arquivos do elemento de entrada e da API de arrastar e soltar (quando o arquivo é arrastado, o evento.datatransfer.files é um objeto filelista)

 <ID de entrada = FileItem Type = FILE> VAR FILELIST = document.getElementById ('FileItem')

Comprimento: Este atributo retorna apenas o comprimento do objeto de arquivo contido no objeto Filelist.

Item (índice): Obtenha o objeto Arquivo especificado na posição designada no objeto Filelist. Pode ser informado na forma de vários índices de matriz

Cada um dos objeto filelista é o objeto de arquivo. Objeto de arquivo é um blob especial.

1.LastModify: O momento em que o arquivo é revisado, desta vez é os milissegundos passados ​​às 0: 0: 00 em 1º de janeiro de 1970. É um atributo legível

2.Nome: o nome do arquivo do arquivo referenciado pelo objeto de arquivo, que é um atributo legível

3.TYPE: O tipo de arquivo do arquivo referenciado pelo objeto de arquivo é o tipo de mina, que é um atributo legível.

4.Size: o tamanho do arquivo do arquivo referenciado pelo objeto de arquivo, este atributo de leitura.

Não há como definir apenas o objeto de arquivo, mas ele tem uma maneira de herdar do objeto BLOB.

O objeto FileReader permite que os aplicativos da Web leiam arquivos no computador do usuário de forma assíncrona.

FileReader () é um construtor que pode criar um novo objeto FileReader através dele.

var fileReader = new FileReader ();

1.Error: retorna o erro que ocorre durante o processo de leitura.

2.Result: Retorna o conteúdo do arquivo e o tipo é digno de digitar ou ArrayBuffer. Este atributo é legal somente depois de ler a operação.

3.readyState: retorna o estado atual da operação.

1.abort (): interrompa operação de leitura. O valor do Estado Ready se torna 2. 2.

2. ReadasArrayBuffer (BLOB): Leia o blob especificado, como um objeto de arquivo (o objeto de arquivo é um blob especial). Enquanto a leitura for concluída, o valor da propriedade ReadyState se tornará 2 e o atributo de resultado é um matriz que representa dados de arquivo.

3. READASDATAURL (BLOB): Leia o Blob especificado, como um objeto de arquivo (um blob especial). Desde que a leitura seja concluída, o valor do atributo ReadyState se tornará 2. O atributo de resultado é um URL que representa os dados do arquivo, e o formato de dados é a sequência baseada em base64

 <Tipo de entrada = arquivo onchange = visualizefile ()> <br> <img src = altura = 200 var visualizador = document.queerySelector ('img'); Arquivos [0];

4. TRATATEXT (BOOB, Codificação): Leia o blob especificado, como um objeto de arquivo (o objeto de arquivo é um blob especial). Enquanto você lê, o valor da propriedade ReadyState se tornará 2 e o atributo de resultado é uma sequência de texto que representa os dados do arquivo. O segundo parâmetro é opcional.

1.Abort: terminação ao ler a operação.

2. Erro: acionado ao ler operações durante a operação.

3. Carregue: acionado ao ler a operação com sucesso.

4.Loadend: acionado no final da operação de leitura. Não é possível ler sucesso ou fracasso.

5.LoadStart: acionado no início da operação de leitura.

6. Processo: acionado durante o processo de leitura.

Usando o objeto de arquivo no HTML5, você pode acessar os arquivos locais selecionados e ler o conteúdo nesses arquivos. O objeto de arquivo é do elemento de entrada ou da interface de arrastar e soltar.

 <Tipo de entrada = ID do arquivo = entrada>

Arquivos de acesso selecionados através da entrada

 var selectFile = document.getElementById ('entrada').

Você só pode escolher um arquivo por vez. Selecione vários arquivos de cada vez antes da Gecko 1.9.2.

Para a interface de arrastar e soltar, você pode visualizar o html5 dragevent.

Etapa 1: crie uma área de colocação. Um elemento comum, como div, p, etc.

Etapa 2: adicione o programa de processamento de eventos Drop, Drop, Dragenter, Dragover à área de colocação. A função principal é o Programa de Processamento de Eventos Drop.

Abaixo está um exemplo de um diagrama de discussão curta:

 <div id = 'Dropbox' Class = 'Dropbox'> </div> .dropbox {borda: sólido 3px Red;

 VAR Dropbox; (e) {E.StopPropagation (); ); i]; );

A interface de arquivo HTML5 acima é introduzida pela Xiaobian para baixar arquivos na página da web. Muito obrigado pelo seu apoio ao site VevB Wulin!