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
属性中