添加删除是一项基本功能，下面就来看一下jquery怎么在图片上添加删除按钮。
设备：联想电脑
系统：xp
软件：jQuery2019
1、首先写一个HTML架构，如图所示代码。
2、新建一个div，div中包裹着一个img标签，视为图片。
3、再次书写一个div，之后会赋予点击事件。
4、然后使用onclick函数进行点击时间的绑定，如图所示。
5、引入jquery.js，之后使用其中的函数。
6、最后编写addButton方法，这样一切就完成了。
function showImage(fileid,imgid,atagID){var ext = "_0"
var thumb = $('img#'+imgid)
var litbox = $('a#'+atagID)
var img1path = document.getElementById("img1path")
if($('.onTeedaError').length>0){
//img1path.value=""
}
var messages =document.getElementById("messages")
if(messages!=null){
//img1path.value=""
}
new AjaxUpload(fileid, {
action: '../../PdfChangeImgUploadServlet?pdfNameEnd=_PERT',
name: ext,
onSubmit: function(file, extension) {
extension=extension.toLowerCase()
if(extension=="pdf")
{
$("#photoError").hide()
$.blockUI({
message: $('span#displayBox'),
css: {
border: 'none',
width: '270px',
}
})
}else{
$("#photoError").show()
return false
}
},
onComplete: function(file, response) {
$('.pdfImg').remove()
$('#pfont').hide()
$.unblockUI()
var res = eval('('+response+')')
var timestemp = new Date().getTime()
var srcStr = res['srcStr']
$('#addImg').val(res['srcStr'])
var imgWidth = res['w'] + "px"
var imgHeight = res['h'] + "px"
$("#addImgWidth").val(imgWidth)
$("#addImgHeight").val(imgHeight)
var str = ""
var arr = []
arr = srcStr.split(",")
$('#imgFile').attr("value",srcStr)
for(var i=0i<arr.lengthi++){
var jpgsrc = arr[i] + '?'+ timestemp
if(i == 0){
str=str+"<a class=\"pdfImg\" style=\"margin-left:10px\" href="+jpgsrc+" rel=\"lightbox"+timestemp+"\">"
str=str+"<img class=\"jpgImgFont\" src="+jpgsrc+" style=\"vertical-align:middlecursor:pointerwidth:"+ imgWidth +"height:"+ imgHeight +" \" />"
str=str+"</a>"
} else {
str=str+"<a class=\"pdfImg\" style=\"margin-left:10pxdisplay:none\" href="+jpgsrc+" rel=\"lightbox"+timestemp+"\">"
str=str+"<img class=\"jpgImgFont\" src="+jpgsrc+" style=\"vertical-align:middlecursor:pointerwidth:"+ imgWidth +"height:"+ imgHeight +" \" />"
str=str+"</a>"
}
}
$('#imgFontDiv').append(str)
//thumb.attr('src', res['src']+'?'+timestemp)
//litbox.attr('href', res['src']+'?'+timestemp)
lightbox.refresh()
$('.jpgImgFont').attr('style', 'width: ' + imgWidth + 'height: ' + imgHeight + "" ).hide().fadeIn('slow')
if(res['img1path']!=""){
img1path.value=res['img1path']
}
if (imgid == 'imgFont') {
document.getElementById("photoName").value=res['srcStr'].substring(res['srcStr'].lastIndexOf("/")+1)
}
//}
}
})
}
function goClearPhoto(textID,imgID,hrefID,photoName){
var _file = document.getElementById(textID)
if(_file.files)
{
_file.value = ""
}
else
{
if (typeof _file != "object")
{
return null
}
var textID=document.getElementById(textID)
textID.value=""
var timestemp = new Date().getTime()
var src=document.getElementById("carPermitDefaultPath").value
var thumb = $('img#'+imgID)
var litbox = $('a#'+hrefID)
thumb.attr('src',"/groupware/images/PdfSample.png")
thumb.attr('style', 'width:230pxheight:240pxborder:0pxvertical-align:middlecursor:pointer' ).hide().fadeIn('slow')
litbox.attr('href',"/groupware/images/PdfSample.png"+'?'+timestemp)
$('.pdfImg').remove()
litbox.show()
lightbox.refresh()
var photoName=document.getElementById(photoName)
photoName.value=null
var imgFont= document.getElementById(imgFont)
imgFont.value = null
}
$("#imgFile").val("")
$("#img1path").val("")
}
html:
<body onload="showImage('insUpdPermitPhoto','imgFont','pfont')>
<div style="margin-top:3pxmargin-bottom:-8px">
<span class="sl-custom-file" style="">
<input type="text" id="img1path" placeholder="対応フォーマット：pdfのみ" readonly="true" class="input-height" style="width:260pxheight:20px"/>
<button class="btn btn-small" id="reference" type="button" style="margin-left:-2pxmargin-top:-12px">
<span style="color:black">参照</span>
</button>
<input type="file" id='insUpdPermitPhoto' class="fileTransIE10 ui-input-file" name="ufile" onChange="getValue(this,'img1path')" />
</span>
<a href="javascript:void(0)" onfocus="this.blur()" onClick="goClearPhoto('img1path','imgFont','pfont','photoName')" class="btn btn-small" style="margin-top:-15px">
<span style="color:black">削除</span>
</a>
</div>
后台用copy方法把图片复制到指定路径就可以了
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）