轮子这么多为什么多此一举？
闲来无事，修改css样式的时候，看了几眼，以前对ele框架upload并未认真看过源码（ps ：懒~）
DOM结构如下：
效果如下：
- 第一眼看了好奇为啥input标签为隐藏状态，我猜不单单是为了样式吧，应该还有其他原因欢迎留言。
- 接下来详细介绍下自己开发的过程：主要实现代码结构展示、类型限制、大小限制等功能。 ①首先针对input标签进行隐藏； ②为上传按钮添加input标签点击事件； ③限制上传类型accetp，以逗号隔开； ④添加多选事件，multiple，默认未单选false；
上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Upload</title>
<style>
.file-upload {
display: none;
}
button {
border: 1px solid #dcdfe6;
white-space: nowrap;
cursor: pointer;
padding: 5px 22px;
font-size: 12px;
border-radius: 3px;
color: #fff;
background-color: #409eff;
border-color: #409eff;
outline: none;
}
</style>
</head>
<body>
<div>
<input type="file" accept="image/*,.pdf" multiple='true' class="file-upload" />
<button onclick="uploadFn()">上传</button>
<button onclick="changeFile()">提交</button>
</div>
<script>
const fileUpload = document.querySelector(".file-upload");
function uploadFn() {
fileUpload.click();
}
function changeFile(){
const getSelectFile=fileUpload.files[0];
if(getSelectFile){
const formData=new FormData();
formData.append('file',getSelectFile);
}
}
</script>
</body>
</html>
