Appearance
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.upload-container {
width: 500px;
height: 100%;
border: 1px solid #ebebeb;
margin: 0 auto;
margin-top: 50px;
box-shadow: 3px 3px rgba(0, 0, 0, .3);
padding: 0 30px;
padding-bottom: 50px;
}
.upload-container .upload-btn {
margin-top: 10px;
}
.upload-container .upload-btn .disabled {
background-color: #dddddd !important;
}
.upload-container .upload-btn .select, .submit{
height: 32px;
background-color: #409eff;
font-size: 12px;
border: none;
border-radius: 3px;
color: #fff;
}
.upload-container .upload-btn .submit {
margin-left: 10px;
}
.upload-container .upload-tip {
font-size: 12px;
color: #606266;
margin-top: 10px;
}
.upload-container .upload-list {
width: 360px;
}
.upload-container .upload-list .list {
height: 26px;
color: #606266;
font-size: 14px;
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.upload-container .upload-list .active {
color: #409eff;
}
.upload-container .upload-list .list .left .file {
width: 14px;
height: 14px;
}
.upload-container .upload-list .list .right .delete, .complete {
width: 14px;
height: 14px;
}
.upload-container .upload-progress {
display: none;
margin-top: 20px;
width: 300px;
height: 6px;
border-radius: 100px;
background-color: #ddd;
}
.upload-container .upload-progress .progress {
border-radius: 100px;
height: 100%;
width: 0%;
background-color: #67c23a;
transition: width .3s;
}
</style>
</head>
<body>
<section class="upload-container">
<input name="upload-inp" type="file" style="display: none;">
<!-- <input name="upload-inp" type="file" accept=".png,.jpg,.jpeg,.webp" style="display: none;"> -->
<div class="upload-btn">
<button class="select" type="button">点击上传</button>
<button class="submit" type="button">上传服务器</button>
</div>
<div class="upload-tip">
只能上传JPG/PNG/JPEG/WEBP文件, 且大小不能超过500kb
</div>
<div class="upload-list"></div>
<div class="upload-progress">
<div class="progress"></div>
</div>
</section>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
<script src="./request.js"></script>
<script>
let uploadContainer = document.querySelector('.upload-container'),
uploadInp = uploadContainer.querySelector('[name=upload-inp]'),
uploadBtn = uploadContainer.querySelector('.upload-btn'),
uploadList = uploadContainer.querySelector('.upload-list'),
uploadProgress = uploadContainer.querySelector('.upload-progress'),
progress = uploadProgress.querySelector('.progress'),
select = uploadBtn.querySelector('.select'),
submit = uploadBtn.querySelector('.submit'),
_file = null
// 点击上传文件按钮, 触发input的点击事件
select.addEventListener('click', function () {
if (isDisabled()) {
// 按钮禁用
return
}
if (_file) {
alert('一次只能上传一张图片~')
return
}
uploadInp.click()
})
// 清除list
function clearList () {
_file = null
uploadInp.value = ''
uploadList.innerHTML = ''
}
// 禁用按钮
function isDisabled () {
return select.classList.contains('disabled') || submit.classList.contains('disabled')
}
// 选择图片时的处理
uploadInp.addEventListener('change', function () {
_file = this.files[0]
if (!_file) {
return
}
uploadList.innerHTML += `
<div class="list">
<div class="left">
<img class="file" src="./static/imgs/file.png" alt="">
<span>${_file.name}</span>
</div>
<div class="right">
<img class="complete" src="./static/imgs/complete.png" alt="">
</div>
</div>
`
})
// list样式
uploadList.addEventListener('mouseover', function (event) {
let list = uploadList.querySelector('.list'),
img = list.querySelector('.right img')
list.classList.toggle('active')
img.src = './static/imgs/delete.png'
img.className = 'delete'
})
uploadList.addEventListener('mouseout', function (event) {
let list = uploadList.querySelector('.list'),
img = list.querySelector('.right img')
list.classList.toggle('active')
img.src = './static/imgs/complete.png'
})
// 删除list
uploadList.addEventListener('click', function (event) {
if (!isDisabled() && event.target.className === 'delete') {
clearList()
}
})
function delay (time) {
if (isNaN(time)) {
time = 300
} else {
tiem = Number(time)
}
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(time)
}, time);
})
}
// 上传图片
submit.addEventListener('click', function () {
if (isDisabled()) {
// 按钮禁用
return
}
if (!_file) {
alert('你还没有选择图片~')
return
}
// 上传过程中禁用按钮
select.classList.toggle('disabled')
submit.classList.toggle('disabled')
// 显示进度条
uploadProgress.style.display = 'block'
let formData = new FormData
formData.append('file', _file)
formData.append('filename', _file.name)
// 上传图片
instance.post('/upload-single', formData, {
// 上传过程进度条 => 基于xhr.upload.onprogress
onUploadProgress (event) {
let { loaded, total } = event,
progressVal = (loaded / total) * 100
progress.style.width = progressVal + '%'
}
})
.then(async (response) => {
if (response.status === 0) {
// 上传成功
progress.style.width = '100%'
await delay(300) // .3s动画 alert阻塞渲染 不加延迟函数可能导致弹窗时进度条是上一次的进度, 弹窗关闭才是100%
alert('上传成功~')
} else {
return Promise.reject(response.statusText)
}
})
.catch(reason => {
// 上传失败 response.status = 1 / 响应码>=300
alert('上传失败, 请稍后再试~')
})
.finally(() => {
_file = null
clearList()
// 隐藏进度条
uploadProgress.style.display = 'none'
progress.style.width = '0%'
// 取消禁用
select.classList.toggle('disabled')
submit.classList.toggle('disabled')
})
})
</script>
</body>
</html>