HTML5 has a standardized File API that enables an HTML page to interact with local files on the browser file system. This API defines four key interfaces,
- BLOB - This interface represents immutable raw data. A Blob has a type attribute that indicates the media type of the data, such as ‘text/plain’.
- File - This interface inherits from Blob and represents an individual file.
- FileList - This interface is a collection of File objects.
- FileReader - This interface provides methods for reading a file or blob.
FileReader Interface
This interface provides three methods for reading data,
- readAsText() - reads a file or blob and makes the contents available as plain text. This method is useful if you want to read the contents of a text file.
- readAsDataURL() - reads a file or blob and makes the contents available as a data URL. This method is useful if you want to read the contents of a binary file, such as an image.
- readAsArrayBuffer() - reads a file or blob and makes the contents available as an ArrayBuffer.
The FileReader object reads contents asynchronously and fires events to indicate the progress of the loading operation. Some of the events are as follows,
- The progress event occurs repeatedly while data is being loaded, to indicate the progress.
- The load event indicates that the data has been successfully loaded.
- The abort event indicates that data loading has been aborted.
- The error event indicates that an error occurred during loading.
- The loadend event indicates that the read operation has completed, either successfully or unsuccessfully.
Let me show you an example of reading a text file. Following are the steps you are required to perform while reading a text file,
- Get a File or Blob object, by <input type=”field”> or by drag-and-drop.
- Create a FileReader object and handle events such as load and error.
- Invoke readAsText() on the FileReader object.
- In the load event handler function, access the text content in the result property of the event target.
- In the error event handler function, implement appropriate error handling.
Exapmle
- <!doctype html>
- <html lang="en">
-
- <head>
- <title>Reading a File</title>
- <script type="text/javascript">
- function onLoadTextFile() {
- var myFile = document.getElementById("myTextFile");
-
- file
- if (myFile.files.length != 0 && myFile.files[0].type.match(/text.*/)) {
-
- var reader = new FileReader();
- reader.onload = function(e) {
- var myDisplayContents = document.getElementById("theDisplayArea");
- myDisplayContents.value = e.target.result;
- };
- reader.onerror = function(e) {
- alert("Cannot load the file");
- };
-
- reader.readAsText(myFile.files[0], "ISO-8859-1");
- } else {
- alert("Select a text file");
- }
- }
- </script>
- </head>
-
- <body>
- <h1> Reading a Text File </h1>
- <p> Select the text file: <input type="file" value="aa" id="myTextFile" onchange="onLoadTextFile()" />
- <hr>
- <h3>Contents of the File:</h3> <textarea id="theDisplayArea" rows="15" cols="40"> </textarea> </body>
-
- </html>