基于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程序设计有所帮助。