HTML5 File API and Uploading Tricks
Define HTML5 File API
HTML5 API enables Java developers to build apps that make local communication and interaction of user with files smooth. With HTML5 File API, developers can load files and render them in the browser without any need of files uploading.
Major HTML5 File Objects Are:
File- It’s a file object having some metadata.
FileList- It’s a simple list that contains file objects.
FileReader- It’s an object that helps user to read files with numerous event handlers and methods to communicate with them.
How To Upload HTML5 File?
After learning some basic concepts about HTML5 file, let’s learn how to use it.
HTML5 helps in reading information about user-selected files and uploading them on a server.
It has an interesting feature of File API that displays files information before uploading on the server and user can send them without “posting” any form.
In below information, you will learn to access file information when the user selects them to upload them asynchronously with Ajax Request.
Single File uploading
You can try out this code for uploading single file:
<input type="file" id="fileinput" />
When the user selects a file, the “change” event is released on the input element.
Multiple File Uploading
After learning the trick of uploading single file, let’s share the code for multiple file uploading.
<input type="file" id="fileinput" multiple="multiple" />
You can notice that [multiple= “multiple”] attribute is added to the HTML element that enables user to select multiple files for uploading.
User can filter elements by using and adding the “accept” attribute to the input element.
Code For Uploading The Files
User can upload the file with Ajax’s help.
We are using XMLHttpRequest in code example-
Note- The above function will make an Ajax request on the URL and file will be sent to “upload¬_file” request parameter variable.
For further information, mail us at firstname.lastname@example.org