Upload Multiple Images With Image Preview Using jQuery,Ajax And PHP

Upload Multiple Images With Image Preview Using jQuery,Ajax And PHP

In this tutorial, I will tell you how to upload multiple images with image preview without refreshing page using PHP, jQuery and Ajax.

In this example, i have used jquery with jquery form plugins, using this plugins i am uploading files on server.

In my previous post, i told you about How to upload an image from a URL in PHP.

You will fine very short easy and useful script here to upload multiple images with preview.

We will show you images in two way. First i will show you on changed event using jquery without uploading files on server and second i will show you images after upload.

Create a HTML File

In this step, i will create a html file first with name multiupload.html and then create a section area for form and preview images.

I have defined a JavaScript method to preview images and i have calculated the file length to know how many files are going to preview.

  1. <html>
  2. <head>
  3. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  5. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  6. <script type="text/javascript" src="http://www.expertphp.in/js/jquery.form.js"></script>
  7. <script>
  8. function preview_images()
  9. {
  10. var total_file=document.getElementById("images").files.length;
  11. for(var i=0;i<total_file;i++)
  12. {
  13. $('#image_preview').append("<div class='col-md-3'><img class='img-responsive' src='"+URL.createObjectURL(event.target.files[i])+"'></div>");
  14. }
  15. }
  16. </script>
  17. </head>
  18. <body>
  19. <div class="row">
  20. <form action="multiupload.php" method="post" enctype="multipart/form-data">
  21. <div class="col-md-6">
  22.     <input type="file" class="form-control" id="images" name="images[]" onchange="preview_images();" multiple/>
  23. </div>
  24. <div class="col-md-6">
  25.     <input type="submit" class="btn btn-primary" name='submit_image' value="Upload Multiple Image"/>
  26. </div>
  27. </form>
  28. </div>
  29. <div class="row" id="image_preview"></div>
  30. </body>
  31. </html>
Create a PHP File

In this step, we will create a PHP file multiupload.php file that contains simple PHP codes to uploading and listng images view.

Before going to move file, create a directory 'images' with write permission so that you can upload files within this directory.

  1. <?php
  2. if(isset($_POST['submit_image']))
  3. {
  4.     $images_array=array();
  5.     foreach($_FILES['images']['name'] as $key=>$val){
  7.      $uploadfile=$_FILES["images"]["tmp_name"][$key];
  8.      $folder="images/";
  9.      $target_file = $folder.$_FILES['images']['name'][$key];
  10.      if(move_uploaded_file($_FILES["images"]["tmp_name"][$key], "$folder".$_FILES["images"]["name"][$key])){
  11.          $images_array[] = $target_file;
  12.      }
  13.     }
  14. }
  15. if(!empty($images_array)){
  16. foreach($images_array as $src){ ?>
  17. <ul>
  18. <li >
  19. <img src="<?php echo $src; ?>">
  20. </li>
  21. </ul>
  22. <?php }
  23. }
  24. ?>

Phone: (+91) 8800417876
Noida, 201301