Jquery file upload


Jquery file upload tutorial:

In this tutorial we are going to create an AJAX jquery file upload with php that will help user to upload image files from their browsers and preview without refreshing current page

The script is very simple, build your image upload form just like normal and instead of posting data from php we will use JavaScript code to post the data to a PHP script in the background

Step 1: Create html Form and apply style

Let’s start with some basic markup and styling.



Our Html form is ready with style finally our form will look like

jquery file upload

Step 2: The JavaScript

Step 3: The PHP

Now in third step we are going to write our php code here i am uploading image files into folder name images you can upload into your custom directory

To upload file using PHP We are using move_uploaded_file function click here to get more info about function

All is done so Here’s what our mini-project looks like so far when we upload files using jquery and php and preview of files :

jquery file upload

The file LoaderIcon.gif is the upload indicator image, pick the file I’ve used on the demo page or check Google for other stylish images or use an online image generator.

Note: here i am uploading image into image directory you can replace with your folder name.

If you’ve got any questions about what we’ve done here, hit those comments! Thank you so much for reading!


Please enter your comment!
Please enter your name here