jquery实现图片上传之前预览的方法
本文实例讲述了jquery实现图片上传之前预览的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <scriptsrc="jquery-1.8.1.min.js"type="text/javascript"></script> <script> /* *参数说明: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() } }) } }); $(function(){ $("#up").uploadPreview({Img:"ImgPr",Width:120,Height:120}); }); </script> </head> <body> <divstyle="width:500px;margin:0pxauto;"><h2>图片上传预览演示</h2> <div><imgid="ImgPr"width="120"height="120"/></div> <inputtype="file"id="up"/> </div> </body> </html>
希望本文所述对大家的jquery程序设计有所帮助。