无后台实现简单上传图片

最新推荐文章于 2024-05-21 14:15:14 发布

VIP文章 catchsomezs

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量333

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/catchsomezs/article/details/125974876

版权

最近需要实现点击上传图片的功能简单写写

首先利用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