html 实时显示input type=file 上传的图片

来源：互联网发布：wampserver域名访问编辑：程序博客网时间：2024/05/08 13:53

在项目开发过程中，有这样的需求：左侧一个<input type="file" > 上传的图片需要在右侧实时显示出该图片。刚拿到需求，感觉头都大了，后来同事帮忙找的例子，也不知其来源，所以在此希望原主看到会，能见谅！！

废话不多说了，直接上代码。

html代码：

<div><label class="edit-font"><span>*</span>服务图片：</label><input class="serverImg" id="imgName" name="imgName" /><input id="img" name="img" onchange="previewImage(this);" type="file"/><span class="ylbut"></span>

<span style="font-family: Arial, Helvetica, sans-serif;"></div></span>

js代码：

function previewImage(file){fileName=$("#img").val();$("#imgName").attr("value",fileName);  var MAXWIDTH  = 218;     //用来显示上传图片的宽度  var MAXHEIGHT = 158;     //用来显示上传图片的高度  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;}

0 0