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

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

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

FileReader接口的方法

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

FileReader接口的事件

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