Loading

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

posted @ 2022-01-26 18:03  Hong•Guo  阅读(90)  评论(0)    收藏  举报