1. Alguns métodos para realizar a visualização da imagem.
Depois de entendê -lo, os métodos são realmente semelhantes. Provavelmente existem as seguintes maneiras:
① Inscreva -se no evento OnChange do elemento de entrada [type = arquivo].
Depois que o caminho selecionado é alterado, a imagem é carregada no servidor e o endereço da imagem é retornado ao lado do servidor e atribuído ao elemento IMG.
Desvantagens: a carga de trabalho é grande. Alguns uploads não são as imagens que os usuários precisam fazer no final. No entanto, esse método salvará todas as imagens selecionadas durante o processo de upload no servidor, o que causará desperdício de recursos. Além disso, a limpeza de imagens temporárias de visualização no lado do servidor também requer uma certa quantidade de trabalho.
②Use o novo recurso HTML5 FILERADER.
Este objeto fornece muitos métodos relacionados, o método mais importante é o readaDataurl. Clique em mim para saber mais.
Desvantagens: O esquema de URI de dados obtido através do método do FileReader readaDataurl 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. Além disso, o suporte do navegador é inconsistente e os navegadores suportados são: FF3.6+, Chrome7+, ie10+.
③ Use window.url.createObjecturl em vez de fileReader e use o filtro dIMAGETRANSForm.Microsoft.alphaimageloader para ser compatível com o IE.
Desvantagens: Devido às considerações de segurança no IE11, o endereço real do arquivo selecionado do usuário não pode ser obtido através do valor, OuterHtml e GetAttribute no elemento de entrada [type = arquivo] e só pode ser obtido.
D:/Nome do frontend/arquivo. Portanto, você precisa usar o método Document.Selection.CreamangeCollection para obter o endereço real.
2. Minha produção de plug-in
Eu escolhi um método mais conservador, que é o terceiro método a usar window.url.createObjecturl em vez de filereader e, em seguida, uso o filtro dIMAGETRANSForm.microsoft.alphaimageloader para ser compatível com o IE.
①O primeiro passo é o layout html
<div id = "pic"> <img id = "visualize" src = "../ imgs/default.jpeg"> </div> <input type = "file" id = "uploadbtn" aceit = "image/*" onchange = "setPreviewpic ()">
Você quer dizer tão fácil?
② Segundo etapa, encapsulamento plug-in js.
1. Crie um objeto
Eu adoto principalmente o método de herança combinada e encapsule dois métodos, ou seja, upload de imagem única e upload de imagens múltiplas. Porque se ele está carregando uma única imagem ou carregando uma única imagem, você precisa passar e fazer o upload do botão de entrada, tag IMG, dividido em IMG e o valor máximo de imagem única, em KB. Portanto, esses quatro parâmetros devem ser transmitidos ao criar o objeto de imagem de upload. O método para criar este objeto é o seguinte:
var setPreviewpic = function (FILEOBJ, visualização, picwrap, maximgSize) {this.fileObj = FILEOBJ; this.Preview = visualize; this.picwrap = picwrap; this.maximgSize = maximgSize;}2. Defina o padrão de correspondência
Como está carregando imagens, além de adicionar aceitar = "imagem/*" para inserir e fazer restrições preliminares, também é necessária uma regularidade do JS para determinar se é uma imagem através da detecção de caminho. Portanto, defina esse padrão no protótipo para uso em dois métodos:
SetPreviewpic.prototype.pattern = novo regexp ('/. (Jpg | png | jpeg)+$', 'i');3. Defina o método
O principal é determinar se o ambiente é menor que o IE11 e escrever dois tipos de soluções. O primeiro é visualizar diretamente a imagem alterando o SRC do IMG, e a segunda é alcançar o efeito de visualização por meio de filtros na versão inferior do IE.
FF, Chrome, IE11 ou acima: (O código para visualizar várias imagens é publicado aqui)
<mpan> if (maxpics) {</span> <br> if (this.fileobj.files && this.fileobj.files [0]) {var iMgs = this.picwrap.QuerySelectorAll ('img'); // Encontre quantas imagens já estão no dom var num = imgs.length; var html = this.picwrap.innerhtml; if (número (num) <número (maxpics)) {// julgar se o limite máximo de upload é excedido se (num == 1 && (! imgs [0] .classList.contains ('newload'))) {// cobertura a primeira imagem de default html = '';} if (this.pattern.test (fileobj.files [0] .name)) {if (JudgeSize (fileObj.files [0] .size/1024, this.maximgsize)) {// julga se o tamanho da imagem excede o limite html = 'iM) {// style = "margem: 5px; largura: '+largura+' px; altura: '+altura+' px;" src = '+window.url.createObjecturl (this.fileobj.files [0])+' /> '+html; this.picwrap.innerhtml = html;} else {alert ('A imagem que você carregou é muito grande!');}} else {alert ('O que você carregou não parece ser uma imagem, verifique -a!');}} {alert ('upload em mais'+maxpics+'Pics' '');De acordo com o IE11, use filtros para alcançar o efeito:
var nums = this.picwrap.childnodes.length; // porque o queryselectorall e outros métodos não são suportados abaixo do IE6, podemos julgar se (nums <maxpics+2) pelo comprimento de ChildNodes se hout (Nums <maxpics+2) {// A adição de 2 aqui é porque existe uma defesa. if (document.Selection) {var iMgsrc = document.selection.createrange (). text; var image = new image (); image.src = imgsrc; filesize = image.filesize; if (Judgesize (Image.Filesize/1024, this.maximgSize)) {// O tamanho da div deve ser definido no IE VAR ele = document.createElement ('div'); ele.style.width = width+'px'; ele.style.Height = altura+'px'; ele.style.filter = "progid: dximagetra nsform.microsoft.alphaimageloader (SizingMethod = escala, src = '"+imgsrc+"') "; tente {this.picwrap.appendChild (ele);} catch (e) {alert ('o A imagem que você carregou está incorreta, selecione novamente! '); return false;} this.preview.style.display = 'nenhum'; document.selection.empty ();} else {alert ('A imagem que você carregou é muito grande!');}}Neste ponto, está feito!
uso:
<script type = "text/javascript" src = "../ js/singlepic.js"> </script> <cript> var ArquiveObj = document.getElementById ('uPLOPLBTBTN'); var visualize = document.getElementById ('visualize'); var picWrap = document.getElementBy ('PIC); SetPreviewpic (FileObj, visualização, picwrap, 100); // Definir o objeto de imagem de upload, os parâmetros são o botão de entrada para fazer upload da imagem, o pacote de tags IMG, a divisão embrulhada em img e o valor máximo de fotografia, a unidade é kbobj.uploadsinglepic (200,250); // uplroads; // uploadpics (200,250,2); // uploadpics (200,250,2); // uploadpics (200,250,2); // uploadpics (200,250,2); // uploadpics (200,250,2); // carrega várias imagens, os parâmetros são a largura, a altura e o número máximo de uploads} </sCript>O acima exposto é o conhecimento relevante sobre a produção de plug-in de visualização de imagem JS de upload (compatível com IE6) apresentada a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem. O editor responderá a você a tempo!