首页 > 代码库 > js本地图片预览
js本地图片预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><head><title>本地图片预览</title><style type="text/css">#preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}</style></head><body><div id="preview"> <img id="imghead" width="100" height="100" border="0" src=‘../images/demo.jpg‘><!--无预览时的默认图像，自己弄一个--></div><div id=‘preview1‘> <img id="imghead1" width="100" height="100" border="0" src=‘../images/demo.jpg‘></div> <br/> <br/> <input type="file" id=‘up‘ /><script type="text/javascript">function previewImage(file,oImg){ var oImg1=document.getElementById(oImg); var MAXWIDTH = 100; var MAXHEIGHT = 100; 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]); var timer=setTimeout(function(){ console.log(img.src); oImg1.src=img.src; },1000); } else { var sFilter=‘filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="http://www.mamicode.com/‘; file.select(); //var src = http://www.mamicode.com/document.selection.createRange().text;、 var src = this.ownerDocument.selection.CreateRange().text console.log(src); div.innerHTML = ‘<img id=imghead>‘; var img = document.getElementById(‘imghead‘); img.filters.item(‘DXImageTransform.Microsoft.AlphaImageLoader‘).src = src; var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); //console.log(sFilter+‘<br>‘+src+‘<br>‘+img+"<br>"+rect); status =(‘rect:‘+rect.top+‘,‘+rect.left+‘,‘+rect.width+‘,‘+rect.height); div.innerHTML = "<div id=divhead style=‘width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"‘></div>"; var timer=setTimeout(function(){ oImg1.src=src; },1000); }}function clacImgZoomParam( maxWidth, maxHeight, width, height ){ var param = {top:0, left:0, width:width, height:height}; if( width>maxWidth || height>maxHeight ) { rateWidth = width / maxWidth; rateHeight = height / maxHeight; if( rateWidth > rateHeight ) { param.width = maxWidth; param.height = Math.round(height / rateWidth); }else { param.width = Math.round(width / rateHeight); param.height = maxHeight; } } param.left = Math.round((maxWidth - param.width) / 2); param.top = Math.round((maxHeight - param.height) / 2); return param;}window.onload=function(){ var oUp = document.getElementById(‘up‘); //var imghead1 = document.getElementById(‘imghead1‘); oUp.onchange=function() { previewImage(this,‘imghead1‘); }}</script></body></html>
js本地图片预览
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。