html部分：
<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
文件引入：
<link rel="stylesheet" type="text/css" href="diyUpload/css/diyUpload.css"><script type="text/javascript" src="diyUpload/js/diyUpload.js"></script>
HTML部分：
<div id="demo"> <div id="as" ></div></div>
JS部分：
<script type="text/javascript">
/** 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯* 其他参数同WebUploader*/
$('#as').diyUpload({
url:'server/fileupload.php',
success:function( data ) {
console.info( data ) },
error:function( err ) {
console.info( err )
},
buttonText : '选择文件',chunked:true,// 分片大小
chunkSize:512 * 1024,//最大上传的文件数量, 总文件大小,单个文件大小(单位字节)
fileNumLimit:50,
fileSizeLimit:500000 * 1024,
fileSingleSizeLimit:50000 * 1024,
accept: {}})
</script>
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方法把图片复制到指定路径就可以了
添加删除是一项基本功能，下面就来看一下jquery怎么在图片上添加删除按钮。
设备：联想电脑
系统：xp
软件：jQuery2019
1、首先写一个HTML架构，如图所示代码。
2、新建一个div，div中包裹着一个img标签，视为图片。
3、再次书写一个div，之后会赋予点击事件。
4、然后使用onclick函数进行点击时间的绑定，如图所示。
5、引入jquery.js，之后使用其中的函数。
6、最后编写addButton方法，这样一切就完成了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）