This quick guide explains the steps to Read local files and metadata using HTML5 without uploading them to the server.
HTML5 comes with an array of features which breaks away from traditional file reading, file upload method. It provides a FileReader object which provides you lots of functions to manipulate the local files in the user system without having them uploaded to the server. This provides great benefits when you need to perform file types checking, size, etc of user-uploaded content on the browser itself by reducing the load on your server.
Read local files and metadata using HTML5
The below example is based on HTML5, JQuery using the FileReader object. This simple example shows how to add an “INPUT” tag, read the file name, file size, file type, and read the content.
HTML
First, we will declare an INPUT tag to let the user choose a file using the ‘Browse’ button. Also, we will add some placeholder to display the file and its metadata.
<div class="example"><input id="myfile" name="myfiles" type="file"> <p></p> <p id="fname"></p> <p id="fsize"></p> <p id="fdate"></p> <p id="fcontent"></p> </div>
Catch the Event
Then we will add some code to handle the event when the user chooses a file. It can be done using the ‘change’ event of the INPUT tag. As soon as the user chooses a file using Browse/Choose File button, the ‘change’ event gets triggered.
$(document).ready(function() {
$("#myfile").change(function() {
// Your code to handle the file
});
});
Now we caught the change event and its time to get hold of the file.
Hold the file and read its metadata
Once we get hold of the file, we can access all of its properties through ‘this’ or JQuery as below.
var thefile = $("#myfile").get(0).files[0];Lets read some of the file properties and display on the screen.
Read the file using FileReader
Now it’s time to read the content of the file. HTML5 provides a FileReader interface that can be used to read a local file as text/binary/blob objects. In this example, we will read the file as a binary string.
Create a new instance of the FileReader interface using its constructor. Define a function to catch the reader’s onload event and get the file data through Filereader’s ‘result’ properties.
var reader = new FileReader(); // Declare a new file reader
reader.onload = function(e) {
$("#fcontent").text("File Content: " + reader.result); // Show the file content
}
We have declared all functions, it’s time to read the file by calling the readAsBinaryString method of FileReader.
reader.readAsBinaryString(thefile); // Read the file
Complete Code:
A simple JQuery HTML5 file read Demo using FileReader
<script>
$(document).ready(function() {
$("#myfile").change(function() {
var thefile = $("#myfile").get(0).files[0]; //Get the file $("#fname").text("File name: "+thefile.name); // Print the file name $("#fsize").text("Size: "+thefile.size + " bytes."); // Print the file size $("#fdate").text("Modified Date: "+thefile.lastModifiedDate.toLocaleDateString()); // Print the file size var reader = new FileReader(); // Declare a new file reader reader.onload = function(e) { $("#fcontent").text("File Content: " + reader.result); // Show the file content
}
reader.readAsBinaryString(thefile); // Read the file
});
});
</script>
I hope this guide helped you to understand the concept and helped you to read local files and metadata using HTML5.
