input file本地图片预览的方法(兼容IE、Chrome和Firefox)

2013-05-08 21:42:36来源:csdn作者:nhconch

input选择图片实现预览本地图片的方法,网上有很多,但是不能很好的兼容多种浏览器,这里找到一个兼容IE6、IE7、IE8和Chrome、firefox等浏览器的代码:

input选择图片实现预览本地图片的方法,网上有很多,但是不能很好的兼容多种浏览器,这里找到一个兼容IE6、IE7、IE8和Chrome、firefox等浏览器的代码:

<!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>      
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      
<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 = evt.target.result;} 
    reader.readAsDataURL(file.files[0]); 
  } 
  else 
  { 
    var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; 
    file.select(); 
    var src = document.selection.createRange().text; 
    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); 
    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>"; 
  } 

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='../images/head01_big.jpg'> 
</div> 
    <br/>      
    <input type="file" onchange="previewImage(this)" />      
</body>      
</html>  

赞助商链接: