FileReader对象

时间 2019-11-08

标签 filereader 对象繁體版

原文原文链接

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

1 if(window.FileReader) { 
2     var fr = new FileReader(); 
3     // add your code here 
4 } 
5 else { 
6     alert("Not supported by your browser!"); 
7 }

2. 调用FileReader对象的方法 html

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

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

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

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法很是容易理解，将文件以文本方式读取，读取的结果便是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，一般咱们将它传送到后端，后端能够经过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件一般是指图像与 html 等格式的文件。（其中base64的方式就是由此来得到的。。）浏览器

3. 处理事件this

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

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

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

fr.onload = function() {  
    this.result;  
};

例子1：code

<!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="读取图像" onclick="readAsDataURL()" />  
        <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />  
        <input type="button" value="读取文本文件" onclick="readAsText()" />  
    </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>