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){
  6.     
  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
ataşehir escort maltepe escort bostancı escort kadıköy escort maltepe escort ataşehir escort kurtköy escort kartal escort pendik escort ataşehir escort
şişli escort
pendik escort
izmir escort izmir escort izmir escort izmir escort denizli escort antalya escort antalya escort antalya escort izmir escort izmir escort izmir escort izmir escort izmir escort