HTML5之FileReader的简易使用

用来把文件读入内存，并且读取文件中的数据。FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

1、FileReader接口的方法

　　FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

方法名: 参数: 描述:
readAsDataURL file 将文件读取为DataURL(一般读取图片)
readAsText ile,[encoding] 将文件读取为文本
readAsBinaryString file 将文件读取为二进制编码
abort (none) 终端读取操作

2、FileReader接口事件

事件: 描述:
onabort 中断
onerror 出错
onloadstart 开始
onprogress 正在读取
onload 成功读取
onloadend 读取完成，无论成功失败

3、FileReader接口的使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="file" id="file">
    <div id="out"></div>
    <img src="" alt="" id="img">
    <script>
        var file = document.getElementById('file');
        var out = document.getElementById('out');//文件展示的1地方
        var img = document.getElementById('img');//图片显示的地方

        file.onchange = function(event){ //监听文件的改变
            var file = event.target.files[0]; //获取到文件的所有信息
            console.log(file)
            var type = 'defautl';

            var reader = new FileReader(); //new一个文件读取的对象（首先要判断你的浏览器是否支持这个方法）

            //判断文件类型
            if(/image/.test(file.type)){ //判断文件的类型
                type = 'image' //图片
                reader.readAsDataURL(file);
            }else{
                type = 'text'; //其他非图片文件
                reader.readAsText(file);
            }
 
            reader.onload = function() { //成功的回调
                var html = '';
                switch(type){
                    case "image"://图片的显示
                        img.src = this.result; 
                        break;
                    case "text"://文件的显示
                        html  = this.result;
                        out.innerHTML = html;
                        break;
                }
                
            }
            
        }
    </script>
</body>
</html>

4、FileReader效果展示

posted @ 2017-07-11 10:58  非常007  阅读(1259)  评论(0)    收藏  举报