基于JQuery实现图片上传预览与删除操作_

1、基于JQuery实现图片上传预览与删除操作_ 这篇文章主要为大家具体介绍了基于JQuery实现图片上传预览与删除操作的相关代码，感爱好的小伙伴们可以参考一下 1. preview.2.0.html !DOCTYPE html html head title上传图片预览/title meta http-equiv=content-type content=text/html; charset=UTF-8 link rel=stylesheet type=text/css href=srdz.preview.2.0.css script type=text/javascript src=jquer

2、y.min.js/script script type=text/javascript src=srdz.preview.2.0.js/script script type=text/javascript $(function() var p = new ImgPreview(); p.preview(previewid:imgupload1); p.preview(previewid:imgupload2); ); /script /head body div align=center style=width: 50%;padding: 50px 300px; id=imgupload1/d

3、iv div align=center style=width: 50%;padding: 50px 300px; 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: 1px solid #ff9000; background: none repe

4、at scroll 0 0 #ff9000; color: #ffffff; text-decoration: none; .btn-pic span 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; displa

5、y: none; .dft float: left; 3. srdz.preview.2.0.js function ImgPreview() ImgPtotype.preview=function(options) var time = new Date().getTime(); var fileid = file + time; var xdelid = xdel + time; var delid = del + time; var viewid = view + time; var htm = + div + div class=dft + a class=btn-

6、pic btn-pic-bg href=javascript:void(0); + span上传图片/span + input id= + fileid + type=file name=file class=ipt-bg / + /a + /div + div id= + xdelid + class=drt + a class=btn-pic btn-pic-bg href=javascript:void(0) + span删除图片/span + input type=button id= + delid + class=ipt-bg/ + /a + /div + /div + div i

7、d= + viewid + /div; $(# + options.previewid).html(htm); $(# + fileid).bind(click,function() var $this =$(this); var browser= isIE:function(ver) var b = document.createElement(b); b.innerHTML = !-if IE + ver + i/i!endif-; return b.getElementsByTagName(i).length = 1; ; $this.change(function() var rege

8、x=/(.*).(jpg|jpeg|png)$/; var val = $this.val(); if(!regex.test(val) $(# + viewid).html(span class=spanc请选择正确的图片（jpg、jpeg、png）!/span); return; if(browser.isIE(6) HanderOther($this); else if(browser.isIE(7) | browser.isIE(8) | browser.isIE(9) HanderIE789($this); else if(window.FileReader) HanderFileR

9、eader($this); else $(# + viewid).html(span class=spanc该扫瞄器不支持预览图片!/span); function HanderFileReader($this) var oFReader = new window.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-ras

10、ter|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(img src=+oFREvent.target.result+ style=width:100

11、%;height:100%;/); $(# + xdelid).show(); ; var aFiles = $this.get(0).files; if (aFiles.length = 0) return; if (!rFilter.test(aFiles0.type) $(# + viewid).html(span class=spanc请选择正确的图片（jpg、jpeg、png）!/span); return; oFReader.readAsDataURL(aFiles0); function HanderIE789($this) if(options.width != null pa

12、rseInt(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.Micro

13、soft.AlphaImageLoader(sizingMethod=scale,src=+GetImgSrc($this)+); $(# + xdelid).show(); function HanderOther($this) $(# + viewid).html(img src=+$this.val()+ style=width:100%;height:100%;/); $(# + xdelid).show(); function GetImgSrc($this) $this.select(); $this.blur(); var imgSrc =document.selection.c

14、reateRange().text; document.selection.empty(); return imgSrc; ); );/绑定按钮大事 $(# + delid).bind(click,function() var browser= isIE:function(ver) var b = document.createElement(b); b.innerHTML = !-if IE + ver + i/i!endif-; return b.getElementsByTagName(i).length = 1; ; if(browser.isIE(7) | browser.isIE(8) | browser.isIE(9) $(# + fileid).va