O upload da imagem é uma função comum, e a visualização da imagem é uma subfunção indispensável na função de upload. Antes disso, eu costumava assinar o evento OnChange do elemento de entrada [tipo = arquivo], uma vez que o caminho é alterado, a imagem é carregada no servidor e o caminho da imagem é obtido e o valor é atribuído ao elemento IMG. Independentemente da solução para o envio de arquivos assíncronos, é para limpar as imagens de visualização temporária no lado do servidor, o que aumentou a carga de trabalho.
Acidentalmente, encontrei as informações relevantes sobre a pré-visualização de imagem do front-end pura da MDN e, em seguida, classifiquei-as e a gravei para referência futura.
1. Preparação 1── FileReader
O FileReader é um novo recurso do HTML5 para leitura de dados dos tipos de blob e arquivos. O uso específico é o seguinte:
(1). Método de construção
var fr = new FileReader ();
(2). Atributos
ReadyState: Type não é assinado, o estado atual da instância do FileReader, (vazio-0, nenhum dado foi carregado ainda; carregando-1, os dados estão carregando; feito-2, todas as solicitações de leitura foram concluídas), somente leitura.
Resultado: o conteúdo do arquivo lido, somente leitura.
Erro: o tipo é domerror, indicando um erro que ocorre ao ler o arquivo, somente leitura.
(3). Método
Abort (): Aborte a operação de leitura e defina o ReadyState para fazer. Quando nenhuma operação de leitura for executada, chamando esse método lançará uma exceção DOM_FILE_ABORT_ERR.
ReadasArrayBuffer (blob blob): Leia dados, o atributo de resultado está definido como o tipo de matriz do ArrayBuffer
Destatext (blob blob [, coding = 'utf-8']): Leia os dados, o atributo de resultado é definido como tipo de string
ReadaSbinaryString (BLOB BLOB): Leia os dados, o atributo de resultado é definido como os dados binários originais
READASDATAURL (BLOB BLOB): Leia os dados, o atributo de resultado é definido como o formulário de esquema de URI de dados (para detalhes, visite "JS Magic Hall: Introdução ao esquema de Uri Data")
(4). Evento
Onload: acionado após a leitura de dados com sucesso
OneError: acionado quando uma exceção é lançada ao ler dados
ONLOADSTART: acionado antes de ler dados
OnLoadend: acionado após a leitura dos dados, acionados após o OnLoad ou o OnError
Onabort: acionado após abortar a leitura
OnProgress: desencadeado periodicamente durante a leitura
(5). Suporte do navegador
FF3.6+, Chrome7+, ie10+
2. Preparação 2──DIMAGETRANSForm.microsoft.alphaimageloader filtro
(1). Função: A função principal é processar transparentemente as imagens (ou seja, 5.5 ~ 6 não suporta PNG transparente)
(2). Como usar em estilos
#Preview {filtro: progid: dximageTransform.microsoft.alphaimageloader (sizingmethod = escala, src = "dummy.png");}(3). Como usar em JS
var preview = document.getElementById ('preview'); preview.style.filter = preview.currentstyle.filter + "; Progid: dximageTransform.microsoft.alphaimageloader (sizingmethod = escala, src = 'dummy.png')"; visualize.filters.iTem ("dximageTransform.microsoft.alphaimageloader"). src = "(4). Atributos
Ativado: opcional, definindo se o filtro é ativado. Intervalo de valor true (padrão), falso
SizingMethod: Opcional, define como a imagem que faz filtro é exibida dentro do limite do contêiner, o valor da faixa de valor (corte a imagem para ajustar o tamanho do contêiner), imagem (valor padrão, aumentar ou diminuir o tamanho do contêiner para ajustar o tamanho da imagem), escala (dimensionando a imagem para ajustar o tamanho do contêiner)
SRC: Necessário, use URL absoluto ou relativo para apontar para a imagem em segundo plano. Quando o URL é o endereço local do computador do usuário, uma exceção que não permite o acesso ao sistema de arquivos local será lançada quando o SRC do elemento IMG for o endereço local do computador do usuário.
Implementação
Em seguida, usamos o ReadaSDataurl do FileReader para obter o esquema de URI de dados para implementar a função de visualização de imagens e usamos o filtro dIMAGETRANSForm.microsoft.alphaimageloader para downgrade.
Fragmento HTML:
<style type = "text/css">#visualização {width: 100px; Altura: 100px;} </style> <!-[se lte ie 9]> <style type = "text/css"> #preview {filtro: progid: dxxETransform.microsoft.alphaimageloader (sizingmethod = escala); } </style> <! [endif]-> <input type = "file" onchange = "showPreview (this);"/> <div id = "visualize"> </div>Fragmento JS:
var visualização = function (el) {var pv = document.getElementById ("visualização"); // ie5.5 ~ 9 Use filtros if (pv.filters && typeof (pv.filters.item) === 'function') {pv.filters.item ("dximageTransform.microsoft.alphaimageloader"). Src = eL.value; } else {// Outros navegadores e IE10+ (filtros não suportam) Use FileReader var FR = new FileReader (); Fr.onLoad = function (evt) {var pvimg = new Image (); pvimg.style.width = pv.offsetWidth + 'px'; pvimg.style.Height = pv.offsetheight + 'px'; pvimg.src = evt.target.result; PV.RemoveChild (0); PV.AppendChild (PVIMG); }; FR.ReADASDATAURL (EL.FILES [0]); }};4. Pit
Como o IE11 fez considerações de segurança, é impossível obter o endereço real do arquivo selecionado do usuário por meio de valor, OuterHtml e GetAttribute no elemento de entrada [type = file =] e pode obter apenas o nome C:/ FakePath/ arquivo. Portanto, se o IE11 for usado, mas o modo de texto estiver definido como abaixo de 10, não há como obter a visualização da imagem.
SOLUÇÃO 1 ── ADENDO ESTA FRENHA NA CABEÇA TAG: <meta http-equiv = "x-ua compatível com" content = "ie = Edge">. Isso dirá ao IE que a versão mais alta do IE atual pode ser usada para analisar e renderizar páginas da web por padrão.
Solução 2 ── Use Document.Selection.CreamangeColleciton () Para obter o endereço real. A operação específica é a seguinte:
// Suponha que o arquivo é o elemento [type = arquivo] fileel.select (); var filepath = document.select.createranCollection () [0] .htmltext;
5. Suplemento: Use window.url.createObjecturl em vez de filereader
O esquema de URI de dados obtido através do método readaDataurl do FileReader gerará uma string base64 muito longa. Se a imagem for maior, a string será mais longa. Se o refluxo da página ocorrer, causará degradação do desempenho. A solução é a seguinte:
1. A tag IMG visualizada usa posicionamento absoluto para sair do fluxo normal de documentos, que não tem nada a ver com outros elementos do documento, e não afetará o desempenho ao refletir.
2. Use window.url.createObjecturl (blob blob) para gerar links de dados.
var createObjecturl = function (blob) {retorna janela [window.webkiturl? 'webkiturl': 'url'] ['createObjecturl'] (blob);};Nota: O link de dados gerado por window.url.createObjecturl é exclusivo da memória; portanto, se você o usar de tempos em tempos, precisará ligar para o Window.url.revokeObjecturl (Domstring Objurl) para liberar memória. O conteúdo também será lançado automaticamente quando a página for atualizada.
var resolveObjecturl = function (blob) {window [window.webkiturl? 'webkiturl': 'url'] ['revokeObjecturl'] (blob);};O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.