js实现上传图片及时预览
本文实例为大家分享了javascript图片预览功能实现的具体代码，供大家参考，具体内容如下
先为大家分享一段关于js图片预览的代码，兼容火狐和谷歌浏览器
/*案例展示图片预览*/
$(function(){
$("#file0").bind("change",function(){
clickupLoad();
});
});
functionclickupLoad(){
varimgObject=document.getElementById('file0');
vargetImageSrc=getFullPath(imgObject);//本地路径
varsrcs=window.URL.createObjectURL(imgObject.files[0]);
varpos=getImageSrc.lastIndexOf(".");
varlastname=getImageSrc.substring(pos,getImageSrc.length)//图片后缀]
if(srcs!=""){
$("#yulan2").attr("src",srcs);
}else{
alert("请选择一张图片");
}
}
functiongetFullPath(obj){//得到图片的完整路径
if(obj)
{
if(window.navigator.userAgent.indexOf("MSIE")>=1){
obj.select();
returndocument.selection.createRange().text;
}elseif(window.navigator.userAgent.indexOf("Firefox")>=1){
if(obj.files){
returnwindow.URL.createObjectURL(obj.files[0]);
}
returnobj.value;
}
returnobj.value;
}
}
实例代码实现js上传图片及时预览：
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>图片上传本地预览</title>
<styletype="text/css">
#preview{width:260px;height:190px;border:1pxsolid#000;overflow:hidden;}
#imghead{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<scripttype="text/javascript">
//图片上传预览IE是用了滤镜。
functionpreviewImage(file)
{
varMAXWIDTH=260;
varMAXHEIGHT=180;
vardiv=document.getElementById('preview');
if(file.files&&file.files[0])
{
div.innerHTML='<imgid=imghead>';
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='<imgid=imghead>';
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="<divid=divheadstyle='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
}
}
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;
}
</script>
</head>
<body>
<divid="preview">
<imgid="imghead"width=100height=100border=0src='<%=request.getContextPath()%>/images/defaul.jpg'>
</div>
<inputtype="file"onchange="previewImage(this)"/>
</body>
</html>
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。