jQuery实现本地预览上传图片功能
本文实例介绍了基于JQUERY扩展，图片上传预览插件，目前兼容浏览器(IE谷歌火狐)不支持safari，分享给大家供大家参考，具体内容如下
HTML代码：
<html>
<head>
<title>图片上传预览演示</title>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"type="text/javascript"></script>
<scriptsrc="16/uploadPreview.js"type="text/javascript"></script>
<script>
$(function(){
$("#up").uploadPreview({Img:"ImgPr",Width:120,Height:120});
});
</script>
</head>
<body>
<divstyle="width:500px;margin:0pxauto;"><h2>图片上传预览演示</h2>
<ahref="#target="_blank">原文</a>
<div><imgid="ImgPr"width="120"height="120"/></div>
<inputtype="file"id="up"/>
</div>
</body>
</html>
js代码：
*参数说明:Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法;
*使用方法:
<div>
<imgid="ImgPr"width="120"height="120"/></div>
<inputtype="file"id="up"/>
把需要进行预览的IMG标签外套一个DIV然后给上传控件ID给予uploadPreview事件
$("#up").uploadPreview({Img:"ImgPr",Width:120,Height:120,ImgType:["gif","jpeg","jpg","bmp","png"],Callback:function(){}});
*/
jQuery.fn.extend({
uploadPreview:function(opts){
var_self=this,
_this=$(this);
opts=jQuery.extend({
Img:"ImgPr",
Width:100,
Height:100,
ImgType:["gif","jpeg","jpg","bmp","png"],
Callback:function(){}
},opts||{});
_self.getObjectURL=function(file){
varurl=null;
if(window.createObjectURL!=undefined){
url=window.createObjectURL(file)
}elseif(window.URL!=undefined){
url=window.URL.createObjectURL(file)
}elseif(window.webkitURL!=undefined){
url=window.webkitURL.createObjectURL(file)
}
returnurl
};
_this.change(function(){
if(this.value){
if(!RegExp("\.("+opts.ImgType.join("|")+")$","i").test(this.value.toLowerCase())){
alert("选择文件错误,图片类型必须是"+opts.ImgType.join("，")+"中的一种");
this.value="";
returnfalse
}
if($.browser.msie){
try{
$("#"+opts.Img).attr('src',_self.getObjectURL(this.files[0]))
}catch(e){
varsrc="";
varobj=$("#"+opts.Img);
vardiv=obj.parent("div")[0];
_self.select();
if(top!=self){
window.parent.document.body.focus()
}else{
_self.blur()
}
src=document.selection.createRange().text;
document.selection.empty();
obj.hide();
obj.parent("div").css({
'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
'width':opts.Width+'px',
'height':opts.Height+'px'
});
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=src
}
}else{
$("#"+opts.Img).attr('src',_self.getObjectURL(this.files[0]))
}
opts.Callback()
}
})
}
});
直接上第二段代码，jqueryjs实现上传图片之前预览本地图片
<styletype="text/css">
#preview_wrapper{
display:inline-block;
width:300px;
height:300px;
background-color:#CCC;
}
#preview_fake{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#preview_size_fake{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
visibility:hidden;
}
#preview{
width:300px;
height:300px;
}
</style>
<scripttype="text/javascript">
functiononUploadImgChange(sender){
if(!sender.value.match(/.jpg|.gif|.png|.bmp/i)){
alert('图片格式无效！');
returnfalse;
}
varobjPreview=document.getElementByIdx_x('preview');
varobjPreviewFake=document.getElementByIdx_x('preview_fake');
varobjPreviewSizeFake=document.getElementByIdx_x('preview_size_fake');
if(sender.files&&sender.files[0]){
objPreview.style.display='block';
objPreview.style.width='auto';
objPreview.style.height='auto';
//Firefox因安全性问题已无法直接通过input[file].value获取完整的文件路径
objPreview.src=sender.files[0].getAsDataURL();
}elseif(objPreviewFake.filters){
//IE7,IE8在设置本地图片地址为img.src时出现莫名其妙的后果
//（相同环境有时能显示，有时不显示），因此只能用滤镜来解决
//IE7,IE8因安全性问题已无法直接通过input[file].value获取完整的文件路径
sender.select();
varimgSrc=document.selection.createRange().text;
objPreviewFake.filters.item(
'DXImageTransform.Microsoft.AlphaImageLoader').src=imgSrc;
objPreviewSizeFake.filters.item(
'DXImageTransform.Microsoft.AlphaImageLoader').src=imgSrc;
autoSizePreview(objPreviewFake,
objPreviewSizeFake.offsetWidth,objPreviewSizeFake.offsetHeight);
objPreview.style.display='none';
}
}
functiononPreviewLoad(sender){
autoSizePreview(sender,sender.offsetWidth,sender.offsetHeight);
}
functionautoSizePreview(objPre,originalWidth,originalHeight){
varzoomParam=clacImgZoomParam(300,300,originalWidth,originalHeight);
objPre.style.width=zoomParam.width+'px';
objPre.style.height=zoomParam.height+'px';
objPre.style.marginTop=zoomParam.top+'px';
objPre.style.marginLeft=zoomParam.left+'px';
}
functionclacImgZoomParam(maxWidth,maxHeight,width,height){
varparam={width:width,height:height,top:0,left:0};
if(width>maxWidth||height>maxHeight){
rateWidth=width/maxWidth;
rateHeight=height/maxHeight;
if(rateWidth>rateHeight){
param.width=maxWidth;
param.height=height/rateWidth;
}else{
param.width=width/rateHeight;
param.height=maxHeight;
}
}
param.left=(maxWidth-param.width)/2;
param.top=(maxHeight-param.height)/2;
returnparam;
}
</script>
<inputname="localfile"type="file"id="localfile"size="28"onchange="onUploadImgChange(this)"/>
<!--以下是预览图片用的-->
<divid="preview_wrapper">
<divid="preview_fake">
<imgid="preview"src=""onload="onPreviewLoad(this)"/>
</div>
</div>
<br/>
<imgid="preview_size_fake"/>
以上就是本文的全部内容，希望对大家的学习有所帮助。