效果
css
.cover {
width: 200px;
margin-bottom: 15px;
}
.img-wrap {
height: 100px;
width: 200px;
border: 2px dotted #d1d5da;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.img-wrap img {
max-height: 100%;
max-width: 100%;
object-fit: cover;
}
.img-action {
display: none;
align-items: center;
justify-content: space-around;
}
.cover:hover > .img-action {
display: flex;
}
html
<div class="form-group">
<label>文章封面</label>
<div>
<div class="cover">
<div class="img-wrap" data-origin-src="">
</div>
<div class="img-action">
<button type="button" class="btn btn-default upload-btn" title="上传">
<i class="lu icon-shangchuan"></i>
</button>
<button type="button" class="btn btn-default del-btn" title="删除">
<i class="lu icon-shanchu"></i>
</button>
<button type="button" class="btn btn-default restore-btn" title="复原">
<i class="lu icon-huifu"></i>
</button>
</div>
</div>
<span class="cover-msg">优质的封面有利于推荐，格式支持png、jpg、jpeg</span>
<input type="text" name="pic" class="form-control pic"
>
</div>
</div>
js
function p1(src) {
return new Promise(function (resolve, reject) {
//获取原图src
if (src === undefined) {
reject("请先上传封面~")
} else {
let originSrc = $('.cover .img-wrap').attr('data-origin-src');
if (src === originSrc) {
//这里代表是原来的那张图不需要异步删除图片，直接删除dom即可
$('.cover .img-wrap img').remove();
$(".pic").val("")
resolve("删除成功")
} else {
//异步删除图片
$.ajax({
url: "<{url('/article/cover')}>",
method: 'delete',
data: {
"file": src
},
dataType: "json",
success: (res) => {
if (res.code === 200) {
resolve("异步删除成功")
$('.cover .img-wrap img').remove();
$(".pic").val("")
} else {
reject('删除失败')
}
}
})
}
}
});
}
//删除按钮操作
$('.cover .del-btn').on('click', function () {
//获取src地址
let src = $('.cover .img-wrap > img').attr('src');
p1(src).catch(function (val) {
Toast.fire({
icon: "error",
title: val
})
})
})
$('.cover .restore-btn').on('click', function () {
//获取origin地址
let originSrc = $.trim($('.cover .img-wrap').attr('data-origin-src'));
if (originSrc === '') {
Toast.fire({
icon: "error",
title: '当前无恢复封面~'
})
} else {
//删除原来的图片
//获取图片地址
let src = $('.cover .img-wrap > img').attr('src');
if (src != undefined) {//有图片就先删除原来上传的图片
p1(src).then(function (val) {
$('.cover .img-wrap').html(`<img src="${originSrc}">`)
//给隐藏域赋值
$(".pic").val(originSrc)
}).catch(function (val) {
Toast.fire({
icon: "error",
title: val
})
})
} else {//没有就直接还原
$('.cover .img-wrap').html(`<img src="${originSrc}">`)
//给隐藏域赋值
$(".pic").val(originSrc)
}
}
})
//上传图片操作按钮
$('.cover .upload-btn').on('click', function () {
let input = document.createElement("input")
input.type = "file"
input.accept = ".png,.jpg,.jpeg"
input.click()
validPic.init2(input)
//不是指定文件
input.addEventListener("error", function () {
Toast.fire({
icon: "error",
title: "只支持png、jpg、 jpeg格式图片"
})
}, false)
//是指定文件回显操作
input.addEventListener("success", function (e) {
//获取图片地址
let src = $('.cover .img-wrap > img').attr('src');
if (src === undefined) {//没有图片直接上传
imgPost(input);
} else {//有图片先删除原来的图片
p1(src).then(function (val) {
imgPost(input);
}).catch(function (val) {
Toast.fire({
icon: "error",
title: val
})
})
}
}, false)
});
function imgPost(input) {
//创建一个 formdata对象
let formData = new FormData()
//file对象
let file = input.files[0]
formData.append("file", file)
$.ajax({
url: "<{url('/article/cover')}>",
type: "POST",
data: formData,
processData: false,
contentType: false,
dataType: "json",
success: function (res) {
if (res.code === 200) {
$('.cover .img-wrap').html(`<img src="${res.data.url}">`)
//给隐藏域赋值
$(".pic").val(res.data.url)
} else {
Toast.fire({
icon: "error",
title: res.msg
})
}
}
})
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
