Upload Several Pictures Using Ajax jQuery with PHP
In this tutorial, I show you how to upload several pictures using ajax, jquery with PHP. In this example, Without refreshing the web page we are going to upload pictures in the specific folder. When the user click button then a popup will open on the web page by choose button we can select several pictures for upload. Since uploading images to the specific folder we are using the PHP script. In the backend, we used Ajax for the request. When we have the select picture then at that time jquery code has been produced and form has been submitting. When form submitted later we should create ajax request by using form data object we have to send chosen file data with ajax request to the PHP script. After uploading the image we have to fetch all pictures from the folder by using glob() function then later we have displayed all the pictures on the web page.
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Upload Several Pictures Using Ajax Jquery with PHP | SoftAOX Tutorials</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1 align="center">Upload Several Pictures Using Ajax Jquery with PHP </h1> <div align="center"> <button type="button" data-toggle="modal" data-target="#src_img_upload" class="btn btn-success btn-lg">Upload Image</button> </div> <br/> <div id="image_gallery"> <?php $images = glob("uploads/*.*"); foreach($images as $image) { echo '<div class="col-md-2" align="center"><img src="' . $image .'" width="180px" height="180px" style="border:1px dotted #cacaca; margin-top:10px;"/></div>'; } ?> </div> </div> <br/> <div id="src_img_upload" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</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="img_select" multiple> </form> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $(document).ready(function() { $('#img_select').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) { $('#img_select').val(''); $('#src_img_upload').modal('hide'); $('#image_gallery').html(data); } }) }); }); </script> </body> </html> |
upload.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?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 = "uploads/".$new_name; move_uploaded_file($sourcePath, $targetPath); } } $images = glob("uploads/*.*"); foreach($images as $image) { $output .= '<div class="col-md-2" align="center" ><img src="' . $image .'" width="180px" height="180px" style="border:1px solid #ccc;" /></div>'; } echo $output; } ?> |
Download
