FileReader
原生js文件读取
<body>
<!--
multiple: 允许用户一次性选择多个文件
-->
<input type="file" id="file" multiple>
<img src="" id="img">
</body>
<script>
var file = document.querySelector('#file');
var img = document.querySelector('#img');
//js原生内置构造函数FileReader()
//1.创建文件读取对象
var reader = new FileReader();
file.onchange = function(){
/*
files属性: 返回一个数组
数组每个元素的值为对象, 对象内部包含图片信息
*/
var fileList = this.files
console.dir(fileList);
//2.readAsDataURL(): 读取文件，为异步方法，不可直接返回结果
reader.readAsDataURL(fileList[0]);
//3.当文件读取完后，onload事件将会被调用
reader.onload = function() {
//4.通过reader.result()来获取readAsDataURL()读取的结果
img.src = reader.result;
}
}
</script>
上图中右边为一种图片编码，是js文件读取的结果，这个结果可以直接放到<img>的src属性中
作者：Hong•Guo
出处：https://www.cnblogs.com/ghnb1/p/15847640.html
版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix