毕业论文中使用的技术—FileReader接口

Posted 2020-08-24 明媚下雨天

用来把文件读入内存，并且读取文件中的数据。

FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据

FileReader接口的方法

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

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

 

FileReader接口的事件

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

 

FileReader接口的使用

1. <p>  
2.     <label>请选择一个文件：</label>  
3.     <input type="file" id="file" />  
4.     <input type="button" value="读取图像" onclick="readAsDataURL()" />  //读取图像
5.     <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />  //读取二进制数据
6.     <input type="button" value="读取文本文件" onclick="readAsText()" />  //读取文本文件
7. </p>  
8. <div id="result" name="result"></div>  

1. var result=document.getElementById("result");  
2. var file=document.getElementById("file");  
3.   
4. //判断浏览器是否支持FileReader接口  
5. if(typeof FileReader == ‘undefined‘){  
6.     result.Innerhtml="<div>浏览器不支持FileReader接口！</div>";  
7.     //使选择控件不可操作  
8.     file.setAttribute("disabled","disabled");  
9. }  
10.   
11. function readAsDataURL(){  
12.     //检验是否为图像文件  
13.     var file = document.getElementById("file").files[0];  
14.     if(!/image\/\w+/.test(file.type)){  
15.         alert("看清楚，这个需要图片！");  
16.         return false;  
17.     }  
18.     var reader = new FileReader();  
19.     //将文件以Data URL形式读入页面  
20.     reader.readAsDataURL(file);  
21.     reader.onload=function(e){  
22.         var result=document.getElementById("result");  
23.         //显示文件  
24.         result.innerHTML=‘<img src="‘ + this.result +‘" alt="" />‘;  
25.     }  
26. }  
27.   
28. function readAsBinaryString(){  
29.     var file = document.getElementById("file").files[0];  
30.     var reader = new FileReader();  
31.     //将文件以二进制形式读入页面  
32.     reader.readAsBinaryString(file);  
33.     reader.onload=function(f){  
34.         var result=document.getElementById("result");  
35.         //显示文件  
36.         result.innerHTML=this.result;  
37.     }  
38. }  
39.   
40. function readAsText(){  
41.     var file = document.getElementById("file").files[0];  
42.     var reader = new FileReader();  
43.     //将文件以文本形式读入页面  
44.     reader.readAsText(file);  
45.     reader.onload=function(f){  
46.         var result=document.getElementById("result");  
47.         //显示文件  
48.         result.innerHTML=this.result;  
49.     }  
50. }  
51. </script>