FileReader

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
FileReader()是一个构造函数
FilerReader.readAsDataURL() 用于读取文件,是一个异步API
具体使用方法如下:

// 此代码用于将用户选择的文件展示在相应的位置
var file = document.querySelector('#file');
        var pic = document.querySelector('#pic');
        // 当用户选择文件后触发
        file.onchange = function() {
            // 创建文件读取对象
            var reader = new FileReader();
            // 用户选择的文件列表 console.log(this.files);
            // 读取文件
            reader.readAsDataURL(this.files[0]); // 异步函数无法通过返回值获取结果
            // 监听onload事件
            reader.onload = function() {
                // reader.result能够获取图片显示的结果---一串路径字符串
                pic.src = reader.result;
            }
Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐