1.公司想做一个小工具,需要编写原生的html配合后端实现一个功能,其中用到了文件的上传
2.其中系统默认的文件上传框太丑了所以需要将原生的给隐藏掉,这里贴html和css部分
<div class="content-form-item">
//这只是form表单的一部分由于原生的input样式无法修改只能将其隐藏,利用其他的占用
<label for="file" >物资消耗:</label>
<div class="upload" >选择文件</div>
<div class="upload-title"></div>
<div class="upload-icon"></div>
<input type="file" name="file" id="file">
</div>
//modal弹窗
<div class="modal" >
<div class="modal-box">
<div class="modal-box-head">选择文件</div>
<div class="modal-box-content">
<div class="modal-box-content-import">
</div>
<div class="modal-box-content-title">
点击拖拽上传数据文件
</div>
<div class="modal-box-content-hint">
支持1MB以内的.xls\.xlsx格式文件,单次上限为5000条数据若数据进入流程,单次上限为1000条数据
</div>
<div class="modal-box-content-export">
<div class="export-icon"></div>
<div class="export-title"><a href="/static/excel/物资消耗模板.xlsx" th:href="@{/static/excel/物资消耗模板.xlsx}">下载物资消耗模板</a></div>
</div>
</div>
<div class="modal-box-foot">
<button class="modal-box-foot-button" >取消</button>
</div>
</div>
</div>
//css代码
<style>
/* 弹窗 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
border-radius: 0px 0px 0px 0px;
opacity: 1;
}
.modal-box {
margin: 50vh auto 0;
width: 580px;
height: 518px;
transform: translateY(-50%);
background: #FFFFFF;
border-radius: 16px 16px 16px 16px;
opacity: 1;
}
.modal-box-head {
height: 24px;
width: 100%;
font-size: 20px;
color: rgba(0, 0, 0, 0.8);
text-align: center;
padding: 40px 0 36px;
}
.modal-box-content {
display: flex;
flex-direction: column;
align-items: center;
width: 360px;
height: 300px;
margin: 0 auto;
background: #EEF4F9;
border-radius: 8px 8px 8px 8px;
opacity: 1;
}
.modal-box-content-import {
width: 100px;
height: 100px;
margin-top: 24px;
background: #2E5371;
border-radius: 0px 0px 0px 0px;
opacity: 1;
/* border: 1px dashed #acaeaf; */
background: url('./srcdata/import-icon.png') no-repeat;
background-size: 100% 100%;
}
.modal-box-content-title {
width: 160px;
height: 24px;
font-size: 16px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.75);
line-height: 24px;
margin: 16px 0;
}
.modal-box-content-hint {
width: 298px;
height: 34px;
font-size: 12px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #6B8295;
line-height: 14px;
}
.modal-box-content-export {
display: flex;
justify-content: center;
align-items: center;
width: 136px;
height: 20px;
margin-top: 16px;
}
.export-icon {
width: 20px;
height: 20px;
/* border: 1px dashed #acaeaf; */
background: url('./srcdata/export-icon.png') no-repeat;
background-size: 100% 100%;
}
.export-title > a {
width: 112px;
height: 20px;
font-size: 14px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #2E5371;
text-decoration: none;
line-height: 20px;
}
.modal-box-foot {
width: 74px;
margin: 36px auto;
}
.modal-box-foot-button {
width: 74px;
height: 42px;
border-radius: 6px 6px 6px 6px;
opacity: 1;
border: 1px solid rgba(0, 0, 0, 0.3);
font-weight: 400;
color: #555555;
font-size: 22px;
background-color: #FFFFFF;
margin: 0 auto;
}
.modal-box-foot-button:active {
background-color: #409EFF;
}
#file {
display: none;
}
/* 选择文件后提示信息 */
.upload-title{
display: none;
height: 42px;
line-height: 42px;
}
.upload-icon {
display: none;
width: 10px;
height: 10px;
margin-left: 5px;
background: url('./srcdata/delete.png') no-repeat;
background-size: 100% 100%;
}
</style>
2.这里写js部分
利用dom的点击方法调用原生的input file方法,直接实现点击上传文间
// 上传文件
let files = document.querySelector('#file')
// 劳动强度列表
let workerType = document.querySelector("#workerType")
// 唤出弹窗按钮
let showModal = document.querySelector(".upload");
// 弹窗
let modal = document.querySelector(".modal")
// 取消弹窗按钮
let cancelModal = document.querySelector(".modal-box-foot-button")
// 拖拽上传区域
let upload = document.querySelector(".modal-box-content")
// 点击上传
let clickImport = document.querySelector('.modal-box-content-import')
// 文件名称
let uploadTitle = document.querySelector('.upload-title')
// 删除文件按钮
let deleteFile = document.querySelector('.upload-icon')
// 点击展示弹窗
showModal.onclick = function() {
modal.style.display = "block";
}
// 点击关闭弹窗
cancelModal.onclick = function() {
modal.style.display = "none";
}
// 点击上传按钮
clickImport.onclick = function() {
files.click()
}
// 当文件上传后隐藏选择文件按钮,展示文件信息和删除按钮
let uploadFun = function(files) {
console.log(files);
if(files.length > 0) {
uploadTitle.style.display = "block"
deleteFile.style.display = "block"
console.log();
uploadTitle.innerHTML = files[0].name
showModal.style.display = "none"
modal.style.display = "none";
}
}
//点击文件上传触发input flie的onchange事件,然后调用uploadFun方法
files.onchange = function() {
uploadFun(files.files)
}
//拖拽文件方法,需要使用 e.preventDefault()阻止浏览器默认行为
upload.addEventListener('dragover', function (e) {
e.preventDefault();
})
upload.addEventListener('drop', function (ev) {
ev.preventDefault()
let file = ev.dataTransfer.files;
//将上传的文件file赋值给input
files.files = file
//赋值后执行uploadFun方法
uploadFun(files.files)
})
// 点击删除文件,将文件名称和删除按钮隐藏,显示选择文件按钮并清空input file的值
deleteFile.onclick = function() {
deleteFile.style.display = "none"
uploadTitle.style.display = "none"
showModal.style.display = "flex"
files.value = ''
// files.outerHTML = files.outerHTML;
// var files = document.querySelector('#file')
// files.onchange = function() {
// uploadFun(files.files)
// }
}
3.注意,开始清空input file上传框时用了files.outerHTML = files.outerHTML; 但后续发现会影响文件删除和上传,于是就用 files.value = ''。