How To Upload HTML5 Files Without Java Developer’s Assistance?

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

FileList

FileReader

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.

Quick Inquiry

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.