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"/>
以上就是本文的全部内容,希望对大家的学习有所帮助。