兼容好的JS图片上传预览代码

在上传图片前预览图片的功能,可提高你网站的用户体验,让用户清楚所要上传的图片是不是选对了。本代码无JS插件,纯JavaScript结合HTML来实现,是一个很不错的例子,比较完整:

<!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 = 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/demo.jpg'><!--无预览时的默认图像,自己弄一个-->

</div>

    <br/>

    <input type="file" onchange="previewImage(this)" />

</body>

</html>

 

你可能感兴趣的:(图片上传)