Uploading multiple images using PHP and Ajax

ajax


Categories

JavaScript Design Patterns PHP jQuery MySQL Databases WordPress Algorithms HTML

Tipo IT - where your web applications live

Here we are demonstrating a multiple image file upload combining jquery Ajax method with PHP server side functionality. Doing it this way, we can upload multiple images without page refresh and effectively, create a responsive image gallery (with the help of Bootstrap of course). However, while integrating a script like this can seem to be simple, there can be a few security issues present, which we will not cover here but in future articles.

index.php



upload.php



delete.php



After the form is submitted, we create ajax request by using form data object and we have to send selected file data with ajax request to the PHP server script. After uploading the files we fetch all images from the folder by using glob() function and display all the images on a front page. The glob() function takes a pattern as a parameter and returns an array containing the matched files or directories. So here, we are looking for all the contents of the uploads folder, where the uploaded images should be. We have also created a delete link that activates the functionality that again, uses the glob() function to delete all previously uploaded files.

Do not forget to create the uploads/ folder in your root directory if you want this example to work.

back to articles...