《基于jquery实现图片上传预览与删除操作.doc》由会员分享，可在线阅读，更多相关《基于jquery实现图片上传预览与删除操作.doc（10页珍藏版）》请在金锄头文库上搜索。
1、基于JQuery实现图片上传预览与删除操作这篇文章主要为大家详细介绍了基于JQuery实现图片上传预览与删除操作的相关代码，感兴趣的小伙伴们可以参考一下1. preview.2.0.html 上传图片预览 $(function var p = new ImgPreview ; p.preview(previewid:imgupload1); p.preview(previewid:imgupload2); );2. srdz.preview.2.0.css.btn-pic display: block; position: relative; width: 120px; height: 40p
2、x; overflow: hidden; cursor: pointer; text-align: center;.btn-pic-bg border: 1px solid #ff9000; background: none repeat 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;
3、 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.jsfunction ImgPreview ImgPreview.prototype.preview=function(options) var time = new Date .getTime ; var fileid = file + time; var xdelid = xde
4、l + time; var delid = del + time; var viewid = view + time; var htm = + + + + 上传图片 + + + + + + 删除图片 + + + + + ; $(# + options.previewid).html(htm); $(# + fileid).bind(click,function var $this =$(this); var browser= isIE:function(ver) var b = document.createElement(b); b.innerHTML = ; return b.getEle
5、mentsByTagName(i).length = 1; ; $this.change(function var regex=/(.*).(jpg|jpeg|png)$/; var val = $this.val ; if(!regex.test(val) $(# + viewid).html(请选择正确的图片（jpg、jpeg、png）!); return; if(browser.isIE(6) HanderOther($this); else if(browser.isIE(7) | browser.isIE(8) | browser.isIE(9) HanderIE789($this)
6、; else if(window.FileReader) HanderFileReader($this); else $(# + viewid).html(该浏览器不支持预览图片!); 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/ti
7、ff|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(); $(# + xdelid).show ; ; var
8、aFiles = $this.get(0).files; if (aFiles.length = 0) return; if (!rFilter.test(aFiles0.type) $(# + viewid).html(请选择正确的图片（jpg、jpeg、png）!); return; oFReader.readAsDataURL(aFiles0); function HanderIE789($this) if(options.width != null & parseInt(options.width) 0) $(# + viewid).css(width,options.width +
9、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)+
10、); $(# + xdelid).show ; function HanderOther($this) $(# + viewid).html(); $(# + xdelid).show ; function GetImgSrc($this) $this.select ; $this.blur ; var imgSrc =document.selection.createRange .text; document.selection.empty ; return imgSrc; ); );/绑定按钮事件 $(# + delid).bind(click,function var browser=
11、isIE:function(ver) var b = document.createElement(b); b.innerHTML = ; return b.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 ;
