Ajax file uploader is useful web tool, which is actually very easy to create with jQuery and PHP, and with new HTML5 FileReader API support, we can do client side file validation before even uploading the file to server. Today we are going to combine all these web features to make an Ajax based file uploader, which can be easily integrated into any HTML forms.
Upload Form Markup
HTML contains file input field, upload button, progress bar and DIV element to output server responses. Only thing to notice here is “multipart/form-data” attribute, it is a data encoding method available in HTML and we always need to include this attribute in our HTML form tag, when creating file upload forms.
jQuery and HTML5 File API
Since we are using jQuery, I’ve included jQuery form plugin in our upload form to make things easier. It offers so many options to manipulate form with minimal code, which is great thing, because we can focus on other things like HTML5 File API. The FileReader is a powerful new feature of HTML5, which lets us read the contents of files locally, validating file is easier than ever. Earlier people used different methods to achieve the same, but it was a daunting task.
We only need these few lines of jQuery code to actually send our file to server using Ajax, with jQuery Form plugin included in our page. No more code is required, but as you can see it also accepts various options such as “beforeSubmit“, “success“, “uploadProgress” etc. (You can find more options here). which can greatly extend the functionality of our form, we can just create block of functions and call them within the option.
Checking HTML5 File API Browser support
Let’s write a beforeSubmit function, which will be called before uploading the file to server, and it is our important piece of code here, because we are going to use HTML File API in it, which will validate the file size and type locally. Since more and more browsers now support HTML FileReader, I think we should definitely use it more often in our upload forms.
Checking File size and type before upload using HTML5 File API
The following code accesses the browser File API support and checks whether the user is trying to upload right file type and its size is under the allowed limit. Older browsers will get an error message asking to upgrade their browser.
It’s always a good idea to include a progress bar in our file uploader to track upload progress, since we are dealing with different files and unlike images, other files can be bigger in size and can take quite a long time to upload. The jQuery form plugin passes several progress information to our function (If supported by browser), which we will capture and use to animate our progress bar.
Server side PHP
Once the file is successfully uploaded to server via the HTTP POST method, we can access the file information using PHP code. The information we need here are file name, type and size, using the information here too we double check for valid file size and type. And then using PHP move_uploaded_file function, we will move the file to a new location, then we can just add mySQL code to store information in the database.
Here’s the complete PHP code which does the server side task, you need to place this file along with upload HTML form page we created earlier, just point your Ajax form to this file.
That’s it, I have tried to make this tutorial very simple, you can download the sample files from below and continue with testing. The demo you’ll see is from different tutorial, but works similar way and it only allows image files. If you have any suggestions please go ahead and leave your valuable comments, good luck!