好资源导航 » 文章资讯 » js上传图片预览的实现方法

js上传图片预览的实现方法

2024-02-24 02:32:04 60

本文实例为大家分享了js上传图片预览的方法，供大家参考，具体内容如下





图片上传本地预览

#preview{width:260px;height:190px;border:1pxsolid#000;overflow:hidden;}
#imghead{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}




//图片上传预览IE是用了滤镜。
functionpreviewImage(file)
{
varMAXWIDTH=260;
varMAXHEIGHT=180;
vardiv=document.getElementById('preview');
if(file.files&&file.files[0])
{
div.innerHTML='';
varimg=document.getElementById('imghead');
img.onload=function(){
varrect=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';
}
varreader=newFileReader();
reader.onload=function(evt){img.src=evt.target.result;}
reader.readAsDataURL(file.files[0]);
}
else//兼容IE
{
varsFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
varsrc=document.selection.createRange().text;
div.innerHTML='';
varimg=document.getElementById('imghead');
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src=src;
varrect=clacImgZoomParam(MAXWIDTH,MAXHEIGHT,img.offsetWidth,img.offsetHeight);
status=('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
div.innerHTML="

"; } } functionclacImgZoomParam(maxWidth,maxHeight,width,height){ varparam={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); returnparam; } /images/defaul.jpg'>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

js上传图片预览的实现方法

热门推荐

随机推荐