标签：function src val img cover 封面设计 promise input 2.0
效果
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
})
}
}
})
}
标签：function,src,val,img,cover,封面设计,promise,input,2.0 来源： https://www.cnblogs.com/lujiahao/p/15383308.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。