基于JQuery实现图片上传预览与删除操作.docx
- 文档编号:3265189
- 上传时间:2022-11-21
- 格式:DOCX
- 页数:4
- 大小:15.69KB
基于JQuery实现图片上传预览与删除操作.docx
《基于JQuery实现图片上传预览与删除操作.docx》由会员分享,可在线阅读,更多相关《基于JQuery实现图片上传预览与删除操作.docx(4页珍藏版)》请在冰豆网上搜索。
基于JQuery实现图片上传预览与删除操作
基于JQuery实现图片上传预览与删除操作
这篇文章主要为大家详细介绍了基于JQuery实现图片上传预览与删除操作的相关代码,感兴趣的小伙伴们可以参考一下
1.preview.2.0.html
上传图片预览
$(function{
varp=newImgPreview;
p.preview({previewid:
"imgupload1"});
p.preview({previewid:
"imgupload2"});
});
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=""+
""+
""+
""+
"上传图片"+
""+
""+
""+
""+
""+
"删除图片"+
""+
""+
""+
""+
"";
$("#"+options.previewid).html(htm);
$("#"+fileid).bind("click",function{
var$this=$(this);
varbrowser={
isIE:
function(ver){
varb=document.createElement('b');
b.innerHTML='';
returnb.getElementsByTagName('i').length===1;
}
};
$this.change(function{
varregex=/(.*)\.(jpg|jpeg|png)$/;
varval=$this.val;
if(!
regex.test(val)){
$("#"+viewid).html("请选择正确的图片(jpg、jpeg、png)!
");
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("该浏览器不支持预览图片!
");
}
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("");
$("#"+xdelid).show;
};
varaFiles=$this.get(0).files;
if(aFiles.length==0){return;}
if(!
rFilter.test(aFiles[0].type)){
$("#"+viewid).html("请选择正确的图片(jpg、jpeg、png)!
");
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("");
$("#"+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='';
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('');
$("#"+
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 基于 JQuery 实现 图片 上传 预览 删除 操作