基于JQuery实现图片上传预览与删除操作
本文实例为大家分享了JQuery实现图片上传预览与删除的具体代码,经测试目前满足谷歌、火狐、360、IE6,7,8,9,10,11等浏览器,供大家参考,具体内容如下
1.preview.2.0.html
<!DOCTYPEhtml> <html> <head> <title>上传图片预览</title> <metahttp-equiv="content-type"content="text/html;charset=UTF-8"> <linkrel="stylesheet"type="text/css"href="srdz.preview.2.0.css"> <scripttype="text/javascript"src="jquery.min.js"></script> <scripttype="text/javascript"src="srdz.preview.2.0.js"></script> <scripttype="text/javascript"> $(function(){ varp=newImgPreview(); p.preview({previewid:"imgupload1"}); p.preview({previewid:"imgupload2"}); }); </script> </head> <body> <divalign="center"style="width:50%;padding:50px300px;"id="imgupload1"></div> <divalign="center"style="width:50%;padding:50px300px;"id="imgupload2"></div> </body> </html>
2.srdz.preview.2.0.css
.btn-pic{ display:block; position:relative; width:120px; height:40px; overflow:hidden; cursor:pointer; text-align:center; } .btn-pic-bg{ border:1pxsolid#ff9000; background:nonerepeatscroll00#ff9000; color:#ffffff; text-decoration:none; } .btn-picspan{ display:block; line-height:39px; } .ipt-bg{ display:block; position:absolute; top:0; left:0; width:120px; height:40px; font-size:100px; opacity:0; filter:alpha(opacity=0); } .spanc{ color:red; } .drt{ float:right; display:none; } .dft{ float:left; }
3.srdz.preview.2.0.js
functionImgPreview(){} ImgPreview.prototype.preview=function(options){ vartime=newDate().getTime(); varfileid="file"+time; varxdelid="xdel"+time; vardelid="del"+time; varviewid="view"+time; varhtm=""+ "<div>"+ "<divclass='dft'>"+ "<aclass='btn-picbtn-pic-bg'href='javascript:void(0);'>"+ "<span>上传图片</span>"+ "<inputid='"+fileid+"'type='file'name='file'class='ipt-bg'/>"+ "</a>"+ "</div>"+ "<divid='"+xdelid+"'class='drt'>"+ "<aclass='btn-picbtn-pic-bg'href='javascript:void(0)'>"+ "<span>删除图片</span>"+ "<inputtype='button'id='"+delid+"'class='ipt-bg'/>"+ "</a>"+ "</div>"+ "</div>"+ "<divid='"+viewid+"'></div>"; $("#"+options.previewid).html(htm); $("#"+fileid).bind("click",function(){ var$this=$(this); varbrowser={ isIE:function(ver){ varb=document.createElement('b'); b.innerHTML='<!--[ifIE'+ver+']><i></i><![endif]-->'; returnb.getElementsByTagName('i').length===1; } }; $this.change(function(){ varregex=/(.*)\.(jpg|jpeg|png)$/; varval=$this.val(); if(!regex.test(val)){ $("#"+viewid).html("<spanclass='spanc'>请选择正确的图片(jpg、jpeg、png)!</span>"); return; } if(browser.isIE(6)){ HanderOther($this); }elseif(browser.isIE(7)||browser.isIE(8)||browser.isIE(9)){ HanderIE789($this); }elseif(window.FileReader){ HanderFileReader($this); }else{ $("#"+viewid).html("<spanclass='spanc'>该浏览器不支持预览图片!</span>"); } functionHanderFileReader($this){ varoFReader=newwindow.FileReader(), rFilter=/^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; oFReader.onload=function(oFREvent){ $("#"+viewid).html("<imgsrc='"+oFREvent.target.result+"'style='width:100%;height:100%;'/>"); $("#"+xdelid).show(); }; varaFiles=$this.get(0).files; if(aFiles.length==0){return;} if(!rFilter.test(aFiles[0].type)){ $("#"+viewid).html("<spanclass='spanc'>请选择正确的图片(jpg、jpeg、png)!</span>"); return; } oFReader.readAsDataURL(aFiles[0]); } functionHanderIE789($this){ if(options.width!=null&&parseInt(options.width)>0){ $("#"+viewid).css("width",options.width+"px"); }else{ $("#"+viewid).css("width","378px"); } if(options.height!=null&&parseInt(options.height)>0){ $("#"+viewid).css("height",options.height+"px"); }else{ $("#"+viewid).css("height","358px"); } $("#"+viewid).css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='"+GetImgSrc($this)+"')"); $("#"+xdelid).show(); } functionHanderOther($this){ $("#"+viewid).html("<imgsrc='"+$this.val()+"'style='width:100%;height:100%;'/>"); $("#"+xdelid).show(); } functionGetImgSrc($this){ $this.select(); $this.blur(); varimgSrc=document.selection.createRange().text; document.selection.empty(); returnimgSrc; } }); });//绑定按钮事件 $("#"+delid).bind("click",function(){ varbrowser={ isIE:function(ver){ varb=document.createElement('b'); b.innerHTML='<!--[ifIE'+ver+']><i></i><![endif]-->'; returnb.getElementsByTagName('i').length===1; } }; if(browser.isIE(7)||browser.isIE(8)||browser.isIE(9)){ $("#"+fileid).val(''); $("#"+viewid).css("filter",""); $("#"+viewid).css("width",""); $("#"+viewid).css("height",""); $("#"+xdelid).hide(); }else{ $("#"+fileid).val(''); $("#"+viewid).empty(); $("#"+xdelid).hide(); } }); };
4.jquery.min.js
更多精彩内容,请点击《jQuery上传操作汇总》,进行深入学习和研究。
以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。