最近需要实现点击上传图片的功能 简单写写
首先利用input标签的type属性
<label for="file">上传图片</label>
<input type="file" id="file" hidden />
接着上js
利用document.getElementById 获取到input元素
const file = document.getElementById("file");
给input绑定事件 若绑定click 则 点击时就触发 change则选择文件后触发
利用 new Image() 和 new FileReader() 生成对应实例
new Image() //初始化时可设图片尺寸 如 new Image(100,200)
//img此时相当于HTMLImageElement实例
/*
经测试 img instanceof Image true
img instanceof HTMLImageElement true
*/
new FileReader()
//利用其readAsDataURL方法 将文件读取为 DataURL
利用FileReader实例身上的readAsDataURL方法, 需要传入一个参数
传入file.onchange的事件对象e.target.files