<!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="'; file.select(); //var src = 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='"+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, 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>