How To Use HTML5 and jQuery To Upload Files

HTML5 and JavaScript are two leading technologies that are dictating the trend in the web development community for all the good reasons. The influx of these two programming languages has changed the game for many webmasters, who look for dynamic ways to develop high-end websites and applications. Given to their amazing features and bespoke functionality, developers look at them with a great positivity and zeal. Today, there are so many websites that are built using the foundation of HTML5 and JavaScript and thus reap the benefits of easy file uploads, without using POST requests or reloading the page.

how-to-use-html5-and-jquery-to-upload-filesAlso like:

JavaScript provides all the necessary features to make the file upload function a breezy process. And, HTML5 uses a number of APIs which can be used to handle files within the browser. These APIs are helping in making common tasks like reading, writing files, and uploading files easy via JavaScript. HTML5 also provides better chances for file validations. It provides users a number of ways to select the file they want to upload and reject. The process helps in reducing the chances of making errors, which developers used to make before earlier.

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.

  1. 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.

CSS

Output:

HTML5 and jQuery To Upload Files

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:

HTML5 and jQuery To Upload Files2Result on Success:

HTML5 and jQuery To Upload Files3

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.

Leave a Reply

50% off over 500 items. Grow your toolkit for all projects. Design, build, produce.Cyber Monday