【广州前端】 javascript中的fileReader对象 - 黑马程序员技术交流社区

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

【浏览器兼容情况】

【FileReader对象的方法介绍】

1. 检测浏览器对FileReader的支持

[JavaScript] 纯文本查看 复制代码

if(window.FileReader) {

    var fr = new FileReader();

    //逻辑代码从这里开始

}

else{

    alert("Not supported by your browser!");

       }

2. 调用FileReader对象的方法

FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，

需要注意的是，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

将文件读取为二进制码

将文件读取为 DataURL

将文件读取为文本

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。

readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。

readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。（其中base64的方式就是由此来获得的。。）

3. FileReader处理事件简介

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

文件读取成功完成时触发

读取完成触发，无论成功或失败

读取开始时触发

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

【测试代码】

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>



<html lang="en">



<head>



    <meta charset="UTF-8">



    <title>FileReader</title>



</head>



<body>



    <p> 



    <label>请选择一个文件：</label> 



        <input type="file" id="file" /> 



        <input type="button" value="读取图像" /> 



        <input type="button" value="读取二进制数据" /> 



        <input type="button" value="读取文本文件" /> 



    </p> 



    <div id="result" name="result"></div> 



</body>



</html>



<script type="text/javascript"> 



var result=document.getElementById("result"); 



var file=document.getElementById("file"); 



//判断浏览器是否支持FileReader接口 



if(typeof FileReader == 'undefined'){ 



    result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>"; 



    //使选择控件不可操作 



    file.setAttribute("disabled","disabled"); 



} 



 



function readAsDataURL(){ 



    //检验是否为图像文件 



    var file = document.getElementById("file").files[0]; 



    if(!/image\/\w+/.test(file.type)){ 



        alert("看清楚，这个需要图片！"); 



        return false; 



    } 



    var reader = new FileReader(); 



    //将文件以Data URL形式读入页面 



    reader.readAsDataURL(file); 



    reader.onload=function(e){ 



        var result=document.getElementById("result"); 



        //显示文件 



        result.innerHTML='<img src="' + this.result +'" alt="" />'; 



    } 



} 



 



function readAsBinaryString(){ 



    var file = document.getElementById("file").files[0]; 



    var reader = new FileReader(); 



    //将文件以二进制形式读入页面 



    reader.readAsBinaryString(file); 



    reader.onload=function(f){ 



        var result=document.getElementById("result"); 



        //显示文件 



        result.innerHTML=this.result; 



    } 



} 



 



function readAsText(){ 



    var file = document.getElementById("file").files[0]; 



    var reader = new FileReader(); 



    //将文件以文本形式读入页面 



    reader.readAsText(file); 



    reader.onload=function(f){ 



        var result=document.getElementById("result"); 



        //显示文件 



        result.innerHTML=this.result; 



    } 



} 



</script>

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中

方法名	参数	描述
abort	none	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本