欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

H5 js的FileReader接口即时预览本地图片方法讲解

程序员文章站 2022-04-15 10:49:37
demo

demo

<!doctype html>  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <meta http-equiv="x-ua-compatible" content="ie=edge">  
    <title>图片预览</title>  
</head>  
  
<body>  
    <input type="file">  
    <img src="">  
</body>  
  
</html>  
<script>  
    var input = document.queryselector('input');  
    input.onchange = function () {  
        //1. 拿到文件 file对象 ,files还是文件列表list,files[0]才是要的对象  
        var file = this.files[0];  
        //2. filereader是接口,创建一个filereader的对象就可以拿到原型中的方法(有四种)  
        var base64 = new filereader();  
        //3. 开始读取文件,读取的是base64的值  
        base64.readasdataurl(file);  
        //4. 因为读取文件需要时间,所以要在回调函数中使用读取的结果  
        base64.onload= function(){  
            document.queryselector('img').src = base64.result;  
        };  
    }  
</script>  

此方法的图片不会通过服务器即可预览,可以减轻服务器压力.

filereader接口事件的用法有四种,其中前三种是读取文件,最后一种是中断读取.

方法名 参数 描述
readasbinarystring file 将文件读取为二进制编码
readastext file,[encoding] 将文件读取为文本
readasdataurl file 将文件读取为dataurl
abort (none) 终端读取操作

filereader不会返回读取结果,结果保存在result中,所以要在回调中读取结果(读取失败为null).详细看代码注释.