이 기사에서는 참조를 위해 JavaScript 이미지 미리보기 기능을 구현하기위한 특정 코드를 공유합니다. 특정 내용은 다음과 같습니다
먼저 Firefox 및 Google Chrome과 호환되는 JS Image Preview에 대한 코드를 공유하겠습니다.
/* 케이스 디스플레이 이미지 미리보기*/$ (function () {$ ( "#file0"). bind ( "change", function () {clickUpload ();}); function clickUpload () {var imgobject = document.getElementById ( 'file0'); var getImagesrc = getfullpath (imgobject); // 로컬 경로 var srcs = window.url.createObjectUrl (imgobject.files [0]); var pos = getImagesrc.lastIndexof ( "."); var lastname = getImagesrc.substring (pos, getImagesrc.length) // 이미지 접미사] if (srcs! = "" ") {$ ("#yulan2 "). attr ("src ", srcs); } else {alert ( "이미지를 선택하십시오"); }} function getfullPath (obj) {// 이미지의 전체 경로를 가져옵니다. if (obj) {if (window.navigator.useragent.indexof ( "msie")> = 1) {obj.select (); return document.selection.createrange () 텍스트; } else if (wind } return obj.value; } return obj.value; }}예제 코드는 JS의 이미지 업로드의 적시 미리보기를 구현합니다.
<html> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> 이미지 로컬 미리보기 </title> <style type = "text/css">#preview {width : 260px; {필터 : progid : dximagetransform.microsoft.alphaimageloader (sizateMethod = image);} </style> <script type = "text/javaScript"> // IE는 필터를 사용하여 사진 업로드 및 미리보기입니다. 함수 previewimage (파일) {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 reader = new Filereader (); reader.onload = function (evt) {img.src = evt.target.result;} reader.readasdataurl (file.files [0]); } else // IE {var sfilter = '필터 : progid : progid : dximagetransform.microsoft.alphaimageloader (sizateMethod = scale, src = "'; file.select (); var src = document.selection.createrange (). getElementById ( 'Imghead'); = ( 'rect :'+rect.top+','+rect.left+','+rect.width+','+rect.height); 스타일 = 'width : "+rect.width+"px; 높이 : "+rect.height+"px; 마진-탑 : "+rect.top+"px; "+sfilter+src+"/"> </div>"} 함수 clacimgzoomparam (maxwidth, maxheight,) 너비 : 높이}; Math. 너비 = 100 높이 = 100 테두리 = 0 SRC = '<%= request.getContextPath ()%>/images/default.jpg'> </div> <입력 유형 = "파일"Onchange = "previewImage (this)"/> </body> </html>위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.