AJAX Multiple Files Upload using PHP, jQuery

I will show you how to upload multiple files using PHP, AJAX and jQuery without page refresh. This multiple files upload tutorial example is very helpful to implement the upload functionality. In this example multiple files are selected using the browse button by holding keyboard’s Ctrl button and files are uploaded to the ‘uploads’ directory. PHP script stores multiple files into the defined location and returns responses as success or failure messages from the PHP script. As a validation step I have added only to check if you have selected at least one file for uploading or not.

You may read also AJAX File Upload using PHP, jQuery and AJAX File Upload using Codeigniter, jQuery

Following steps are required in order to upload multiple files

1.  Include jQuery library.

2.  HTML page with upload field.

3.  jQuery Ajax code.

3.  PHP script to store the file.

Step 1. Include jQuery library into <head/> section of the HTML page

Step 2. Put the below upload field inside <body/> tag in HTML page

Step 3. Add below jQuery, AJAX code immediate after the jQuery library inside <head/> section of the HTML page

Step 4. Create uploads.php file with below source code

If we combine the steps 1, 2, and 3 then the full source code would be as shown below in a file called files_upload_ajax.php

Now if you run the above file and while selecting multiple files using Ctrl key then you will see below output in the browser

ajax php jquery multiple files

If you try to upload file without selecting any file then you would see error message “Please choose at least one file”.

If the file successfully uploaded then you will see success message “File successfully uploaded : uploads/<some-file-name>“.

If the file you are trying to upload already exists then you will see a message “File already exists : uploads/<some-file-name>“.

Hope you have got an idea how to upload multiple files using PHP, AJAX and jQuery.

Thanks for reading.

2 Replies to “AJAX Multiple Files Upload using PHP, jQuery”

Leave a Reply

Your email address will not be published. Required fields are marked *