HTML5 implementa funções de upload de imagens únicas e múltiplas

Prefácio

Hoje falamos sobre upload de imagens, simples ou múltiplas. Hoje em dia, existem inúmeros plug-ins importantes para upload de imagens, como: verupload.js do Jquery, jQuery File Upload, Uploadify, jQuery.filter e assim por diante. Mas. Não falaremos sobre os plug-ins mencionados acima hoje. Vamos dar uma olhada em como usar o FileReader em HTML5 para realizar visualização, exclusão, upload e outras funções de imagens únicas e múltiplas. Vamos dar uma olhada no efeito após a implementação:

Este é o botão que o usuário clica. Nossa frase mais importante é input type=file e um atributo múltiplo é fornecido, que pode atender às necessidades de upload de várias imagens.

 <div class=form-group form-row> <label class=col-sm-2 control-label uText>Álbum do clube</label><div class=row> <div class=col-xs-10 col-sm- 8 mTop5> <rótulo <tipo de entrada=arquivo aceito=imagem/* nome=ClubImagesUpload id=ClubImagesUpload class=ocultar múltiplos=múltiplos> <img src=/Images/registerNewSite/btn_addimg.png class=addImg/> </label> </div> </div></div>

A área abaixo é usada para visualização da imagem

 <div class=form-group form-row id=preViewMore><div class=row> <div class=col-xs-9> <div id=clubInputImagePreview class=col-sm-9 img-preview img-preview-sm </div> </div> </div></div>

O que? Você ainda tem que olhar o estilo para ver se ainda é humano (sorriso irônico)

Primeiro, vamos analisar o html acima. Usamos um rótulo para envolver a entrada e uma tag img Esperamos que ao clicar na imagem + na renderização, uma caixa de diálogo para seleção de fotos apareça. o rótulo um rótulo primeiro evento de clique:

 $(#btnClubImg).click(function() { //TODO Algo});

Vejamos a seguir, porque queremos obter o arquivo carregado, e nosso arquivo está principalmente na entrada, então primeiro obtemos a tag de entrada:

 $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input);//Imprime o elemento atual});

Vamos imprimir o rótulo do elemento de entrada atual para ver o que é.

Ao expandirmos o primeiro item, descobriremos que o comprimento dos arquivos é 0.

Ok, vamos continuar a análise, porque queremos ser capazes de obter o arquivo atualmente selecionado quando a caixa de entrada mudar. Para simplificar, quando um arquivo for selecionado, podemos obter o arquivo atualmente selecionado. a entrada de texto na caixa de entrada Então, após análise, sabemos que precisamos adicionar um evento change à tag de entrada:

 $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input); $input.on(change, function () { console.log(this);// Imprime o elemento atual alterado});});

Vamos dar uma olhada e ver o que há dentro do elemento de entrada alterado:

Pode-se ver claramente aqui que obtivemos a imagem selecionada, incluindo o evento da última modificação, nome da imagem, tamanho e tipo de imagem (com o tipo de arquivo, podemos avaliar se o usuário atual selecionou uma imagem, certo? (sorriso semicerrado) )) Novamente, isso é para um único arquivo. Se houver vários arquivos, haverá vários arquivos.

Olhando para baixo, podemos ver na impressão que obtivemos as informações do arquivo que desejamos no elemento files da tag input, só precisamos obtê-las:

 var arquivos = this.files; var comprimento = arquivos.length;

Desta forma, podemos obter todos os arquivos e o número de arquivos. Aí vem a pergunta: se selecionarmos vários arquivos, e se os exibirmos um por um e os exibirmos na página? Quando você viu as quatro palavras marcadas acima, duas palavras passaram pela sua mente? ciclo

 $.each(arquivos, função (chave, valor) { //TOTO Algo });

Percorrendo os arquivos obtidos acima, podemos obter as informações de cada arquivo por vez. Desta forma, você não só pode enviá-los um após o outro, mas se quiser, também pode enviá-los para o céu ~

 var fileReader = new FileReader();//Instancia um objeto FileReader var file_ = files[key];//Obtém o arquivo atual if (/^image///w+$/.test(file_.type)) {// Execute uma correspondência regular no arquivo atual para ver se é a imagem selecionada fileReader.onload = function() {//Chamado quando a operação de leitura é concluída} }

É necessário ampliar os pontos de conhecimento do FileReader:

FileReader é usado principalmente para ler o conteúdo do arquivo na memória. Por meio de uma série de interfaces assíncronas, os arquivos locais podem ser acessados ​​no thread principal.

Usando objetos FileReader, os aplicativos da web podem ler de forma assíncrona o conteúdo de arquivos (ou buffers de dados brutos) armazenados no computador do usuário. Você pode usar objetos File ou objetos Blob para especificar os arquivos ou dados a serem processados.

Voltando ao assunto, conseguimos obter o arquivo e obter o retorno, então neste momento só precisamos exibir o resultado retornado.

$(#clubInputImagePreview).css(background-image, url( + this.result + ));

Vamos imprimir this.result para ver o que é:

Nem é preciso dizer que a imagem é convertida para o formato de dados Base64. Finalmente, chamamos readAsDataURL para ler o conteúdo do arquivo e representá-lo como uma string data:url.

fileReader.readAsDataURL(value);

Dessa forma, você pode obter uma demonstração simples de upload de imagens, mas não é definitiva porque ainda precisa agregar muitos negócios. Por exemplo: depois de obter uma imagem de visualização, o rótulo atual será ocupado. Se você fizer um loop na próxima vez e usar o rótulo original diretamente, a imagem anterior definitivamente será substituída. ser capaz de exibi-lo em sequência, em vez de substituir o display. Então, ainda precisamos fazer algum processamento:

 $(#clubInputImagePreview).css(background-image, url( + this.result + ));//Use apend para anexar um nó filho sob o elemento atual $(#clubInputImagePreview) .append(<img src='/Images /registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />);//Use after para anexar um nó irmão ao nó irmão atual $(#clubInputImagePreview).after( <div id='clubInputImagePreview1' class='col-sm-9 img-preview img - preview-sm delImg' </div>);

Então, quando adicionamos a imagem excluída, também precisamos dar a ela um evento de clique para fazer nossa área de visualização atual desaparecer:

 $(#ImgRemove).click(function () { $(this).parent().remove();});

No final, você descobrirá que o resultado não é o que desejamos. Isso ocorre porque o ID atual ainda está lá, então a próxima etapa não pode ser executada. elemento com o mesmo ID, então o navegador pensará que este é um novo elemento:

 $input.removeAttr(id); var newInput ='<tipo de entrada=arquivo aceito=imagem/* name=ClubImagesUpload id=ClubImagesUpload class=ocultar múltiplo=múltiplo>';

O código JS completo final é o seguinte:

 var intP = 0; console.log(este); var arquivos = isto.arquivos; var comprimento = arquivos.comprimento if (intP > 8) { camada.msg('Não há mais imagens~', {}); return; } $.each(arquivos, função (chave, valor) { var fileReader = new FileReader(); var file_ = files[key]; if (/^image///w+$/.test( file_.type)) { fileReader.onload = function() { if (intP > 8) { layer.msg('Não há mais imagens~', {}); intP == 0) { console.log(this.result); $(#clubInputImagePreview).css(imagem de fundo, url( + this.result + )); /Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />); $(#clubInputImagePreview).after(<div id='clubInputImagePreview1' class='col-sm-9 img-preview img-preview-sm delImg'></div> }); else { $(#clubInputImagePreview + parseInt(intP) + ).css(imagem de fundo, url( + this.result + )); $(#clubInputImagePreview + parseInt(intP) + ).append( <img src='/Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove + parseInt(parseInt( 1) + parseInt(intP)) +' />); $(#clubInputImagePreview + parseInt(intP) + ).after( <div id='clubInputImagePreview + parseInt(parseInt(1) + parseInt(intP)) + 'class='col-sm-9 img-preview img-preview- sm delImg' </div> } if (chave == 0 && intP == 0) { $(#ImgRemove).click(function () { $(this).parent().remove(); }); else { $(#ImgRemove + parseInt(parseInt(1) + parseInt(intP)) + ) .click(function() { $(this).parent().remove(); } } intP += parseInt(1 }); fileReader.readAsDataURL(value } else { layer.msg(Erro de formato<br/>Selecione um arquivo de imagem=); arquivo aceitar=imagem/* nome=ClubImagesUpload id=ClubImagesUpload class=ocultar múltiplos=múltiplos>'; $(this).append($(newInput) });

O texto acima é a implementação HTML5 de funções de upload de imagens únicas e múltiplas introduzidas pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo.