1. API do arquivo: (API do arquivo)
Cada arquivo selecionado por um controle de formulário de tipo de arquivo é um objeto de arquivo e o objeto Filelist é uma lista de coleta desses objetos de arquivo, representando todos os arquivos selecionados. O objeto de arquivo herda de um objeto BLOB, que representa dados brutos binários e fornece um método de fatia para acessar os blocos de dados originais dentro de bytes. Em resumo, o objeto de arquivo contém o objeto flielista, e o objeto de arquivo herda do objeto BLOB!
Relações de atributo relevante de cada objeto:
Interface FileReader:
Como pode ser visto na figura, o HTML5 também fornece uma interface FileReader: usado para ler arquivos na memória e ler dados no arquivo.
var leitor = new fileReader ();
Existem quatro métodos e seis eventos no total para esta interface:
• ReadaSbinaryString (arquivo): Leia o arquivo como binário
• ReadasDataurl (arquivo): Leia o arquivo DATAURL
• Destatext (arquivo, [codificação]): Leia o arquivo como texto
• Sobre (nenhum): interromper a leitura do arquivo
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
• Onabort: acionado ao ler o arquivo interrompido
• OnError: acionado quando ocorre um erro quando um arquivo é lido
• Onloadstart: acionado ao ler o arquivo inicia
• OnProgress: continua desencadeando ao ler o arquivo
• Onload: acionado quando o arquivo é lido com sucesso
• OnLoadend: acionado no final da leitura do arquivo (o sucesso e a falha são acionados)
Os parâmetros do evento acima e têm E.Target.Result ou this.Result apontam para o resultado da leitura!
2. Arraste e solte a API:
Arraste e soltar atributo: defina o atributo arrastável do elemento que precisa ser arrastado e soltado para true (dragável = "true")! O elemento IMG e um elemento podem ser arrastados e soltos por padrão.
Arraste e soltar eventos: (segmentado em eventos de elemento de arrasto e soltar e eventos de elementos de destino)
Arraste e soltar eventos de elementos:
• Dragstart: acionado antes de arrastar
• arrastar, gatilhos continuamente antes e depois de arrastar
• arrastar, o arrasto aciona
Evento de elementos de destino:
• Dragenter, insira o elemento de destino para acionar
• Dragover, entre entrar no alvo e deixar o alvo, acionando continuamente
• Arrastar, acionando o elemento de destino
• Solte, solte o gatilho do mouse no elemento de destino
mas! Deve -se notar que, no elemento de destino, o comportamento padrão deve ser bloqueado (a dragover e a queda são recusadas) na dragover e soltar eventos, caso contrário, arrastar e soltar não poderão ser implementados!
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Objeto DataTransfer: Ele é usado especialmente para armazenar dados a serem transportados durante o arrasto e soltar. Ele pode ser definido como a propriedade DataTransfer dos eventos de arrastar e soltar.
3 atributos:
• EffectLowed: Defina estilos de cursor (nenhum, copiar, copylink, copyMove, link, linkMove, mover, todos e não inicializado)
• EffectLowed: Defina os efeitos visuais das operações de arrastar e soltar
• Tipos: o tipo de dados armazenados, um pseudo-matriz de strings
• Arquivos: Obtenha o arquivo arrastado externo, retornar uma lista de filmes, existe um atributo de tipo na lista de arquivos, que retorna o tipo de arquivo
4 métodos:
• setData (): defina a chave e o valor dos dados (deve ser uma string)
• getData (): obtenha dados e obtenha o valor correspondente de acordo com o valor da chave.
• cleardata (): limpe os dados armazenados no objeto DataTransfer
• SetDragImage (imageurl, log x, longo y): use o elemento IMG para definir o ícone de arrastar e soltar
//Exemplo:
Target.addeventListener ('dragstart', função (e) {
var fs = e.datatransfer.files; // Obtenha objeto flielista de lista de objetos de arrasto e solta
var dt = e.datatransfer; // propriedade DataTransfer como evento de arrastar e soltar
dt.effectLowed = 'cópia';
dt.setData ('texto/simples', 'hello');
dt.setDragImage (Dragicom, -10, -10);
});
3. Arraste e solte a visualização da imagem de upload:
Ideias:
1. Familiarizada com os quatro eventos do elemento de destino de arrasto de arquivo. Nota: O comportamento padrão é bloqueado nos eventos OnDragover e OnDrop.
2. Depois de arrastar e soltar, obtenha a coleção de objetos de arquivo: e.datatransfer.files
3. Loop todos os objetos de arquivo da coleção, julgue o tipo e o tamanho do arquivo e execute operações correspondentes se o tipo for especificado.
4. Leia o objeto de informações do arquivo: new FileReader (), que possui métodos como o objeto de arquivo de leitura como dataurl: readaSDataurl (objeto de arquivo), eventos acionados após leitura bem -sucedida: evento Onload, etc., this.Result é os dados de leitura
5. Realize o processamento lógico correspondente em vários eventos no objeto FileReader
Html:
<div> <p> Por favor, arraste o arquivo de imagem para esta área! </p> </div>
Contagem total de carga: <span id = 'total'> 100 </span>
JQ:
<script type="text/javascript"> $(function() { /*Thoughts: *1. Be familiar with the four events of the target element of the file dragging target. Note: the default behavior is blocked in the ondragover and ondrop events*2. After dragging and dropping, get the file object collection: e.dataTransfer.files *3. Loop each file object in the set, judge the file type and file size, and perform corresponding operations if it é um tipo especificado*4. var odiv = $ ("contêiner"). Get (0); OP.HTML ('Por favor, arraste o arquivo de imagem para esta área!'); Coleção // Prind Length Console.Log (FILMA); console.log (fs [i] .size); $ ("Total"). HTML (E.Total); oimg.attr (SRC ", this.result); Upload, o AJAX envia o arquivo, faça o upload do arquivo binário}}}} else {alert ('Por favor, faça o upload do arquivo de imagem!'); </script>Imagem de reprodução:
Resumo: Combinando o conhecimento da API de Evento de arrastar e soltar, objeto DataTransfer e Lista de objeto de leitura de arquivos, etc., para obter o efeito de visualização de arrastar e soltar o upload de imagens simples. Você precisa conhecer o relacionamento e o uso de um objeto e esclarecer as idéias de implementação!
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.