- 10+ Responsive HTML5 Login Forms Free Download
- 35+ Free HTML5 & CSS3 Navigation Menus for Download
- 15+ Free HTML5 One Page Templates Download
In this tutorial, I am going to discuss the process of uploading files using HTML5 and jQuery To Upload Files. I hope you like it and bookmark it for the future reference.
So, let’s get started!
Understanding the basics of HTML5 file uploads
HTML5 makes it possible for you to create a file uploading field on your website using three technologies. They are- File Reader API, Drag and Drop API, and the Ajax.
Let’s get to the code.
- To begin with, we need to create an HTML form that allows user to select the files they want to upload. To make it easy for you to understand, we can use a standard < input> element with the ‘file’ type. You can also use a drag and drop. We also need to use a ‘pre’ element that will be used to display file’s content.
We are done with creating our HTML demo. Now, after getting your jQuery code, simply remove the “enctype=”multipart/form-data” to give your form an ability to accept multiple files. If you don’t remove the function, the form will only accept a single file and “Upload” button also needs to be given a trigger functionality.
Now, we need to write the following code to handle the file upload.
The below mentioned code consists an element using which multiple outputs can be rendered.
The element is useful to upload files while showing the upload progress. There are two progresses that are displayed to the user.
- A message showcasing that uploading is in progress
- Once all the files are uploaded, the generic handler sends a success message to the user
Result showcasing an error:
Override the Code to Make Sure Page Won’t Reload the POST Request.
You can do it simply. Just replace the second line inside the event handler i.e., event.preventDefault (); with the behavior that you wish to trigger. And, you are done.