Technical-filereader interface used in graduation thesis

Used to read the file into memory and read the data in the file.

The FileReader interface provides an asynchronous API that allows you to access the file system asynchronously in the main thread of the browser, reading the data in the file

Method of FileReader interface

Method Name	Parameters	Description
Readasbinarystring	File	To read a file as a binary encoding
Readastext	File,[encoding]	To read a file as text
Readasdataurl	File	Read the file as Dataurl
Abort	(none)	Terminal Read operations

The method does not return a read result, regardless of the success or failure of the read, which is stored in the result property.

Events for the FileReader interface

Event	Describe
Onabort	Interrupt
OnError	Error
Onloadstart	Begin
OnProgress	is reading
OnLoad	Successfully read
Onloadend	Read complete regardless of successful failure

Use of the FileReader interface

2. <p>
4. <label> Please select a file:</label>
6. <input type="file" id="file" />
8. <input type="button" value="read image" onclick="Readasdataurl ()" />//Read image
10. <input type="button" value="read binary data" onclick="readasbinarystring ()" />//Read binary data
12. <input type="button" value="read text file" onclick="Readastext ()" />//Read text file
14. </P>
16. <div id="result" name="result"></div>

2. var result=document.getElementById ("result");
4. var file=document.getElementById ("file");
8. Determine if the browser supports the FileReader interface
10. if (typeof FileReader = = ' undefined ') {
12. result. innerhtml="<div> Browser does not support FileReader interface!  </div> ";
14. Make the selection control not operational
16. File.setattribute ("Disabled", "disabled");
18. }
22. function Readasdataurl () {
24. Verify that the image file is
26. var file = document.getElementById ("file"). Files[0];
28. if (!/image\/\w+/.test (File.type)) {
30. Alert ("See Clearly, this needs a picture!") ");
32. return false;
34. }
36. var reader = new FileReader ();
38. Read the file into the page as a data URL
40. Reader.readasdataurl (file);
42. reader.onload=function (e) {
44. var result=document.getElementById ("result");
46. Show Files
48. result.innerhtml=' alt="" /> ";
50. }
52. }
56. function readasbinarystring () {
58. var file = document.getElementById ("file"). Files[0];
60. var reader = new FileReader ();
62. Read the file into the page in binary form
64. reader.readasbinarystring (file);
66. reader.onload=function (f) {
68. var result=document.getElementById ("result");
70. Show Files
72. result.innerhtml=This.result;
74. }
76. }
80. function Readastext () {
82. var file = document.getElementById ("file"). Files[0];
84. var reader = new FileReader ();
86. Read the file into the page as text
88. Reader.readastext (file);
90. reader.onload=function (f) {
92. var result=document.getElementById ("result");
94. Show Files
96. result.innerhtml=This.result;
98. }
100. }
102. </Script>

Technical-filereader interface used in graduation thesis