使用fileReader实现图片预览

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，

使用 File 或 Blob 对象指定要读取的文件或数据。其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,

也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果.

<input type="file">
<br>
<img src="" alt="">

var fileInput=document.querySelector('input[type=file]');
    var viewImg=document.querySelector('img');
    fileInput.addEventListener('change',function(){
        //console.log(this.files[0]);
        var file=this.files[0];
        var reader=new FileReader();
        reader.addEventListener('load',function(){
            console.log(reader.result);
            viewImg.src=reader.result;
        },false);
        reader.readAsDataURL(file);
    },false);

 

转载于:https://www.cnblogs.com/caoruichun/p/7691089.html