Friday, 25 November 2016

Upload Multiple Images by Using PHP Ajax Jquery with Bootstrap Modal

           , , ,      14 comments   


This one more tutorial on how to use Bootstrap Modal in Web Development. In this post we will use Bootstrap Modal for upload multiple images on folder by using PHP script with Ajax Jquery without refreshing of page. In this example we will make system for uploading one or more than one image to the specified path. Here we will use Bootstrap Modal for selecting multiple images. On web page we will put simple button and when we have click on that button then after modal will popup on web page and In modal we will put input type file tag and from that tag we can select multiple images for upload. For uploading images to specified path we have use php script for uploading multiple images to specified path as back end by called by Ajax request. For this things we have create one button and then after we have create modal. By clicking on button we can pop up modal on web page. From this modal we can select multiple file and when we have select file then at that time jquery code has been execute and form has been submitted. When form submitted after we have create ajax request and by using form data object we have send selected file data with ajax request to the php script and by php script we have upload multiple images to the folder. After uploading image we have fetch all images from folder by using glob() function and then after we have display images on web page.



Source Code


index.php


 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | Upload Multiple Image by Using PHP Ajax Jquery with Bootstrap Modal</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
      </head>  
      <body>  
           <br />  
           <div class="container">  
                <h3 align="center">Upload Multiple Image by Using PHP Ajax Jquery with Bootstrap Modal</h3><br />  
                <br />  
                <br />  
                <div align="center">  
                     <button type="button" data-toggle="modal" data-target="#uploadModal" class="btn btn-info btn-lg">Upload Images</button>  
                </div>  
                <br /><br />  
                <div id="gallery">  
                <?php  
                $images = glob("upload/*.*");  
                foreach($images as $image)  
                {  
                     echo '<div class="col-md-1" align="center" ><img src="' . $image .'" width="100px" height="100px" style="margin-top:15px; padding:8px; border:1px solid #ccc;" /></div>';  
                }  
                ?>  
                </div>  
                <br />  
                <br />  
           </div>  
           <br />  
      </body>  
 </html>  
 <div id="uploadModal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Upload Multiple Files</h4>  
                </div>  
                <div class="modal-body">  
                     <form method="post" id="upload_form">  
                          <label>Select Multiple Image</label>  
                          <input type="file" name="images[]" id="select_image" multiple />  
                     </form>  
                </div>  
           </div>  
      </div>  
 </div>  
 <script>  
 $(document).ready(function(){  
      $('#select_image').change(function(){3  
           $('#upload_form').submit();  
      });  
      $('#upload_form').on('submit', function(e){  
           e.preventDefault();  
           $.ajax({  
                url :"upload.php",  
                method:"POST",  
                data:new FormData(this),  
                contentType:false,  
                processData:false,  
                success:function(data){  
                     $('#select_image').val('');  
                     $('#uploadModal').modal('hide');  
                     $('#gallery').html(data);  
                }  
           })  
      });  
 });  
 </script>

upload.php


 <?php  
 //upload.php  
 $output = '';  
 if(is_array($_FILES))  
 {  
      foreach($_FILES['images']['name'] as $name => $value)  
      {  
           $file_name = explode(".", $_FILES['images']['name'][$name]);  
           $allowed_extension = array("jpg", "jpeg", "png", "gif");  
           if(in_array($file_name[1], $allowed_extension))  
           {  
                $new_name = rand() . '.'. $file_name[1];  
                $sourcePath = $_FILES["images"]["tmp_name"][$name];  
                $targetPath = "upload/".$new_name;  
                move_uploaded_file($sourcePath, $targetPath);  
           }  
      }  
      $images = glob("upload/*.*");  
      foreach($images as $image)  
      {  
           $output .= '<div class="col-md-1" align="center" ><img src="' . $image .'" width="100px" height="100px" style="margin-top:15px; padding:8px; border:1px solid #ccc;" /></div>';  
      }  
      echo $output;  
 }  
 ?>

14 comments: