基于JQuery实现图片上传预览与删除操作_ 这篇文章主要为大家具体介绍了基于JQuery实现图片上传预览与删除操作的相关代码，感爱好的小伙伴们可以参考一下 1.preview.2.0.html DOCTYPE html html head title上传图片预览/title meta http-equivcontent-type contenttext/html; charsetUTF-8 link relstylesheet typetext/css hrefsrdz.preview.2.0.css script typetext/javascript srcjquery.min.js/script script typetext/javascript srcsrdz.preview.2.0.js/script script typetext/javascript function var p new ImgPreview; p.previewpreviewidimgupload1; p.previewpreviewidimgupload2; ; /script /head body div aligncenter stylewidth 50;padding 50px 300px; idimgupload1/div div aligncenter stylewidth 50;padding 50px 300px; idimgupload2/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 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; height 40px; font-size 100px; opacity 0; filter alphaopacity0; .spanc color red; .drt float right; display none; .dft float left; 3.srdz.preview.2.0.js function ImgPreview ImgPreview.prototype.previewfunctionoptions 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 classdft a classbtn-pic btn-pic-bg hrefjavascriptvoid0; span上传图片/span id fileid typefile namefile classipt-bg / /a /div div id xdelid classdrt a classbtn-pic btn-pic-bg hrefjavascriptvoid0 span删除图片/span typebutton id delid classipt-bg/ /a /div /div div id viewid /div; options.previewid.htmlhtm; fileid.bindclick,function var this this; var browser isIEfunctionver var b document.createElementb; b.innerHTML --if IE ver i/iendif--; return b.getElementsByTagNamei.length 1; ; this.changefunction var regex/.*.jpg|jpeg|png/; var val this.val; ifregex.testval viewid.htmlspan classspanc请选择正确的图片（jpg、jpeg、png）/span; return; ifbrowser.isIE6 HanderOtherthis; else ifbrowser.isIE7 || browser.isIE8 || browser.isIE9 HanderIE789this; else ifwindow.FileReader HanderFileReaderthis; else viewid.htmlspan classspanc该扫瞄器不支持预览图片/span; function HanderFileReaderthis 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/svgxml|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.htmlimg srcoFREvent.target.result stylewidth100;height100;/; xdelid.show; ; var aFiles this.get0.files; if aFiles.length 0 return; if rFilter.testaFiles0.type viewid.htmlspan classspanc请选择正确的图片（jpg、jpeg、png）/span; return; oFReader.readAsDataURLaFiles0; function HanderIE789this ifoptions.width null parseIntoptions.width 0 viewid.csswidth,options.width px; else viewid.csswidth,378px; ifoptions.height null parseIntoptions.height 0 viewid.cssheight,options.height px; else viewid.cssheight,358px; viewid.cssfilter,progidDXImageTrans.Microsoft.AlphaImageLoadersizingscale,srcGetImgSrcthis; xdelid.show; function HanderOtherthis viewid.htmlimg srcthis.val stylewidth100;height100;/; xdelid.show; function GetImgSrcthis this.select; this.blur; var imgSrc document.selection.createRange.text; document.selection.empty; return imgSrc; ; ;//绑定按钮大事 delid.bindclick,function var browser isIEfunctionver var b document.createElementb; b.innerHTML --if IE ver i/iendif--; return b.getElementsByTagNamei.length 1; ; ifbrowser.isIE7 || browser.isIE8 || browser.isIE9 fileid.val; viewid.cssfilter,; viewid.csswidth,; viewid.cssheight,; xdelid.hide; else fileid.val; viewid.empty; xdelid.hide; ; ; 以上就是本文的全部内容，盼望对大家学习jquery程序设计有所关心。
...