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

本文实例为大家分享了JQuery实现图片上传预览与删除的具体代码，经测试目前满足谷歌、火狐、360、IE6,7,8,9,10,11等浏览器，供大家参考，具体内容如下
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="jquery.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"></div><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 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: alpha（opacity=0）;} .spanc{color: red;} .drt {float: right;display: none;} .dft {float: left;}

3. srdz.preview.2.0.js

function ImgPreview（）{} ImgPreview.prototype.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-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 id="" + 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 regex=/（.*）.（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）{HanderFileReader（$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-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（"<img src=""+oFREvent.target.result+"" style="width:100%;height:100%;"/>"）;$（"#" + xdelid）.show（）;}; var aFiles = $this.get（0）.files;if （aFiles.length == 0） { return; }if （！rFilter.test（aFiles[0].type）） { $（"#" + viewid）.html（"<span class="spanc">请选择正确的图片（jpg、jpeg、png）！</span>"）; return; }oFReader.readAsDataURL（aFiles[0]）;} function HanderIE789（$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（）;} 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.createRange（）.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）.val（""）;$（"#" + viewid）.css（"filter",""）;$（"#" + viewid）.css（"width",""）;$（"#" + viewid）.css（"height",""）;$（"#" + xdelid）.hide（）;}else{$（"#" + fileid）.val（""）;$（"#" + viewid）.empty（）;$（"#" + xdelid）.hide（）;}}）;};

4. jquery.min.js

以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。