Este artigo compartilha o código específico para implementar a função de visualização de imagem JavaScript para sua referência. O conteúdo específico é o seguinte
Primeiro, vou compartilhar com você um código sobre o JS Image Preview, que é compatível com o Firefox e o Google Chrome
/* Caso Exibir imagem Visualização*/$ (function () {$ ("#file0"). Bind ("alteração", function () {clickupLoad ();});}); function clickupLoad () {var iMgObject = document.getElementById ('file0'); var getImagesrc = getfullPath (imgobject); // Caminho local var srcs = window.url.createObjecturl (imgobject.files [0]); var pos = getImagesrc.lastindexof ("."); var lastName = getImagesrc.substring (pos, getImagesrc.length) // sufixo de imagem] if (srcs! = "") {$ ("#yulan2"). att ("src", srcs); } else {alert ("Selecione uma imagem"); }} função getfullpath (obj) {// Obtenha o caminho completo da imagem se (obj) {if (window.navigator.UserAgent.indexOf ("msie")> = 1) {obj.select (); retornar document.selection.createrange (). text; } else if (window.navigator.userAgent.indexOf ("firefox")> = 1) {if (obj.files) {return window.url.createObjecturl (obj.files [0]); } retornar obj.value; } retornar obj.value; }}O código de exemplo implementa a visualização oportuna do upload da imagem por JS:
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> upload de imagem Visualização local </title> <estilo type = "text/css">#visualize {width: 260px; altura: 190px; border/border: 1pg. {filtro: progid: dxxETransform.microsoft.alphaimageloader (sizingmethod = image);} </style> <script type = "text/javascript"> // ie usa filtros para fazer upload e visualização de imagens. Função VisualizeImage (arquivo) {var maxWidth = 260; var maxHeight = 180; var div = document.getElementById ('visualização'); if (file.files && file.files [0]) {div.innerhtml = '<img id = imghead>'; var iMg = document.getElementById ('imghead'); img.onload = function () {var ret = clacimgZoomParam (maxwidth, maxHeight, img.offsetWidth, img.offsetHeight); img.width = ret.width; img.Height = ret.Height; // img.style.marginleft = ret.left+'px'; img.style.margintop = ret.top+'px'; } var leitor = new FileReader (); leitor.onload = function (evt) {img.src = evt.target.result;} reader.readasDataurl (file.files [0]); } else // compatível com ie {var sfilter = 'filtro: progid: dximageTransform.microsoft.alphaimageloader (sizingmethod = scale, src = "' file.Select (); var src = document.selection.Createrange (). text; Document.getElementById ('ImGhead'); = ('Rect:'+ret.top+','+ret.left+','+ret.width+','+ret.Height); estilo = 'largura: "+ret.width+" px; altura: "+ret.Height+" px; margem-top: "+ret.top+" px; "+sfilter+src+"/"'> </div>"; largura: largura, altura}; Math.Round (Width / TakeHeight); largura = 100 altura = 100 borda = 0 src = '<%= request.getContextPath ()%>/imagens/default.jpg'> </div> <input type = "file" onchange = "visualize (this)"/> </body> </html>O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.