关于原生的东西，起码我多少是忘了许多，记录一下。这也是H5比较常用功能了。
需求/问题：点击button，选择图片、校验、上传
废话不多说，直接上代码吧
<!DOCTYPE html>
<html>
<head>
</head>
<body >
<button id="subimg" onclick="ome()">来了老弟</button>
<input type="file" multiple id='getfile' onchange="add(this)" ></input>
<img src="./20201201111431.jpg" id="myimg" style="height: 250px;"/>
</body>
<script >
let myimg =document.getElementById('myimg')
let subimg =document.getElementById('subimg')
let getfile =document.getElementById('getfile')
function ome() {
getfile.click() //触发上传控件
}
function add(f) {
// console.log(f.files[0].type) //图片格式
// console.log(f.files[0].size) //图片大小做判断
// 解析预览
let reader = new FileReader()
reader.readAsDataURL(f.files[0])
reader.onload = function () {
// console.log( reader.result) //base64格式的图片
myimg.src=reader.result
}
//上传时候也是传的f.files[0]文件。
}
</script>
</html>
点击“”来了老弟“”，触发选择文件的控件，选好图片了才会触发add()。
真实项目中是不会修改“选择文件“控件的样式的，更不会留他在页面上。都是直接隐藏，用更好看的元素代替他
坑点：
- 只能在标签上绑定onchange事件，才能获取到参数（自己，必须写this）。如果写监听函数是拿不到这个参数的
- 1024字节=1kb，1024kb=1M。1024102410=10M
- 无论是否设置多选，都要是参数.files[0]
公司实战
