Este artículo comparte el código específico para implementar la función de vista previa de imagen JavaScript para su referencia. El contenido específico es el siguiente
Primero, compartiré con ustedes un código sobre la vista previa de la imagen JS, que es compatible con Firefox y Google Chrome
/* Case Display Image Preview*/$ (function () {$ ("#file0"). Bind ("Change", function () {clickUpload ();});}); función clickupload () {var imgobject = document.getElementById ('file0'); var getImagesrc = getFullPath (imgobject); // ruta local var srcs = window.url.createObjectUrl (imgobject.files [0]); var pos = getImagesrc.lastIndexOf ("."); var lastName = getImagesrc.substring (pos, getImagesrc.length) // sufijo de imagen] if (srcs! = "") {$ ("#yulan2"). attr ("src", srcs); } else {alerta ("Seleccione una imagen"); }} función getFullPath (obj) {// Obtenga la ruta completa de la imagen if (obj) {if (window.navigator.useragent.indexof ("msie")> = 1) {obj.select (); return Docum.Selection.CreaterGe (). Text; } else if (window.navigator.useragent.indexof ("firefox")> = 1) {if (obj.files) {return window.url.createObjectUrl (obj.files [0]); } return obj.Value; } return obj.Value; }}El código de ejemplo implementa la vista previa oportuna de la carga de imagen por JS:
<html> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Image cargue la vista previa local </title> <style type = "text/css">#previsor {ancho: 260px; altura: 190px; border: 1px sólido#000; overflow: halflow; hhhus {Filtro: progid: dximagetransform.microsoft.alphaimageLoader (dimensionmethod = image);} </style> <script type = "text/javaScript"> // es decir, usa filtros para cargar y obtener una vista previa de imágenes. function PreviewImage (archivo) {var maxWidth = 260; var maxheight = 180; var div = document.getElementById ('Preview'); if (file.files && file.files [0]) {div.innerhtml = '<img id = imghead>'; var img = document.getElementById ('Imghead'); img.onload = function () {var rect = clacimgzoomparam (maxwidth, maxheight, img.offsetwidth, img.offsetheight); img.width = rect.width; img.height = rect.height; // img.style.marginleft = rect.left+'px'; img.style.margintop = rect.top+'px'; } var lector = new FileReader (); Reader.onload = function (evt) {img.src = evt.target.result;} lector.readasdataurl (file.files [0]); } else // Compatible con IE {var sfilter = 'filtre: progid: dximagetransform.microsoft.alphaimageLoader (dimensionador document.getElementById ('Imghead'); = ('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height); style = 'width: "+rect.width+" px; altura: "+rect.height+" px; margin-top: "+rect.top+" px; "+sfilter+src+"/"> </div>"; Left: 0, ancho: ancho, altura}; param.width = math.round (width / rateHeight); id = "Imghead" width = 100 Height = 100 border = 0 src = '<%= request.getContextPath ()%>/images/default.jpg'> </div> <input type = "file" onchange = "previsual ViewImage (this)"/> </body> </html>Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.