<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片读取</title>
</head>
<body>
<input type="file" id="fileCtrl"/><hr/>
<img src="" id="imageCtrl" alt=""/>
</body>
<script type="text/javascript">
//选择dom元素
const fileCtrl = document.querySelector('#fileCtrl');
const imageCtrl = document.querySelector('#imageCtrl');
/**
* addEventListener：添加事件
* change：改变执行
*/
fileCtrl.addEventListener('change',() =>{
console.log(fileCtrl.files[0]); //获取files属性
/**
* //读取文件
* @type {FileReader} 是js内部的api读取文件的内容
*/
const reader = new FileReader();
/**
* readAsDataURL：读取为字符串
* base64:读取的类型
*/
reader.readAsDataURL(fileCtrl.files[0])
/**
* load 事件在整个页面及所有依赖资源如样式表和图片都已完成加载时触发
* 相当于vue里面的onmount
*/
reader.addEventListener('load', () =>{
console.log('读取的结果')
console.log(reader.result)//result：读取的结果
imageCtrl.src = reader.result;//把读取的文件结果显示到页面展示
});
});
</script>
</html>
9278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
