设计
其实是模仿csdn的发布文章的封面选择
默认样式鼠标移动上去颜色会变深一点，并出现鼠标手势
<style>
.cover {
width: 200px;
height: 100px;
position: relative;
margin-bottom: 8px;
}
.up-icon-wrap {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #f2f2f2;
cursor: pointer;
}
.up-icon-wrap:hover {
background-color: #ebebeb;
}
.img-wrap {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #f2f2f2;
display: flex;
align-items: center;
justify-content: center;
}
.img-wrap img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.img-action-wrap {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: transparent;
display: flex;
align-items: center;
justify-content: space-around;
}
.img-action-wrap:hover {
background-color: rgba(0, 0, 0, .03);
}
.img-action-wrap:hover > .img-action {
display: inline-block;
}
.img-action-wrap > .img-action {
display: none;
font-size: 14px;
background-color: rgba(0, 0, 0, .4);
padding: 8px 12px;
text-align: center;
border-radius: 4px;
color: #fff;
cursor: pointer;
}
.cover-msg {
font-size: 12px;
color: #999aaa;
}
</style>
<div>
<div class="cover">
<div class="up-icon-wrap">
<i class="lu icon-tianjia"></i>
</div>
<{* <div class="img-wrap">*}>
<{* <img src="/static/index/images/datu.jpeg">*}>
<{* </div>*}>
<{* <div class="img-action-wrap">*}>
<{* <div class="img-action">*}>
<{* <i class="lu icon-shanchu img-del-btn"></i>*}>
<{* </div>*}>
<{* <div class="img-action">*}>
<{* <i class="lu icon-huifu"></i>*}>
<{* </div>*}>
<{* </div>*}>
</div>
<span class="cover-msg">优质的封面有利于推荐，格式支持png、jpg、jpeg</span>
<input type="text" name="pic" class="form-control pic">
</div>
$(".cover").on("click", '.up-icon-wrap', function () {
let input = document.createElement("input")
input.type = "file"
input.click()
validPic.init2(input)
//不是指定文件
input.addEventListener("error", function () {
Toast.fire({
icon: "error",
title: "只支持png、jpg、 jpeg格式图片"
})
}, false)
//是指定文件回显操作
input.addEventListener("success", function (e) {
//创建一个 formdata对象
let formData = new FormData()
//file 对象转换成 blob
let file = input.files[0]
formData.append("file", file)
formData.append("up_type", "2")
$.ajax({
url: "<{url('/article/upfile')}>",
type: "POST",
data: formData,
processData: false,
contentType: false,
dataType: "json",
success: function (res) {
if (res.code === 200) {
//给隐藏域赋值
$(".pic").val(res.data.url)
//1.找到容器
let wrap = $(".cover")
//2.html
let html = `
<div class="img-wrap">
<img src="${res.data.url}">
</div>
<div class="img-action-wrap">
<div class="img-action">
<i class="lu icon-shanchu img-del-btn"></i>
</div>
</div>
`;
//3.追加html
wrap.append(html)
} else {
Toast.fire({
icon: "error",
title: res.msg
})
}
}
})
}, false)
});
// 删除图片
$(".cover").on("click", '.img-del-btn', function () {
//1.找到原来的图片地址
let url = $('.img-wrap>img').attr('src');
//2.发送ajax删除图片地址
$.ajax({
url: "<{url('/article/delfile')}>",
data: {
"file": url
},
dataType: "json",
success: (res) => {
if (res.code === 200) {
// 修改隐藏域表单
$(".pic").val("")
// 删除当前点击图片显示
$('.img-wrap').remove()
$('.img-action-wrap').remove()
} else {
Toast.fire({
icon: "error",
title: "删除失败,请重试"
})
}
}
})
})
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
