Tuesday 19 April 2016

Multiple Images Upload using PHP Jquery Ajax



In this tutorial I will show you how to upload multiple Images without page refresh with PHP Jquery and Ajax. Using this code you can upload multiple images without page refresh with the help of PHP Jquery and Ajax. Once Images will be uploaded they will be immediately display on the web page without page refresh.

Source Code

multiple_file_upload.php

 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | Multiple Image Upload</title>  
           <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>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
      </head>  
      <body>  
           <br /><br />  
           <div class="container">  
                <form id="uploadForm" action="upload.php" method="post">  
                     <div id="gallery"></div><div style="clear:both;"></div><br /><br />  
                     <div class="col-md-4" align="right">  
                          <label>Upload Multiple Image</label>  
                     </div>  
                     <div class="col-md-4">  
                          <input name="files[]" type="file" multiple />  
                     </div>  
                     <div class="col-md-4">  
                          <input type="submit" value="Submit" />  
                     </div>  
                     <div style="clear:both"></div>  
                </form>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $('#uploadForm').on('submit', function(e){  
           e.preventDefault();  
           $.ajax({  
                url: "upload1.php",  
                type: "POST",  
                data: new FormData(this),  
                contentType: false,  
                processData:false,  
                success: function(data)  
                {  
                     $("#gallery").html(data);  
                     alert("Image Uploaded");  
                }  
           });  
      });  
 });  
 </script>  

upload.php

 <?php  
 //upload.php  
 $output = '';  
 if(is_array($_FILES))   
 {  
      foreach ($_FILES['files']['name'] as $name => $value)  
      {  
           $file_name = explode(".", $_FILES['files']['name'][$name]);  
           $allowed_ext = array("jpg", "jpeg", "png", "gif");  
           if(in_array($file_name[1], $allowed_ext))  
           {  
                $new_name = md5(rand()) . '.' . $file_name[1];  
                $sourcePath = $_FILES['files']['tmp_name'][$name];  
                $targetPath = "upload/".$new_name;  
                if(move_uploaded_file($sourcePath, $targetPath))  
                {  
                     $output .= '<img src="'.$targetPath.'" width="150px" height="180px" />';  
                }                 
           }            
      }  
      echo $output;  
 }  
 ?>  

0 comments:

Post a Comment