首页 > 代码库 > 图片预览

图片预览

<!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" ><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><script type="text/javascript">function previewImage(file){  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 = http://www.mamicode.com/evt.target.result;}"‘;    file.select();    var src = http://www.mamicode.com/document.selection.createRange().text;"<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>";  }}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;}</script></head><body><div id="preview">    <img id="imghead" width="100" height="100" border="0" src=http://www.mamicode.com/‘../images/demo.jpg‘>"file" onchange="previewImage(this)" /></body></html>

  

图片预览