In this post we explain you the way of upload multiple image files using jQuery Ajax. You can use this code any where as per your requirement. Just go through this post to implement this, its very easy and useful.
Upload Multiple Image Files using jQuery Ajax:
Lets implement this Step by Step.
1) First create a HTML form to upload the images. Check below index.html code for this.
|
1 2 3 4 5 6 7 8 9 10 11 |
<form method="post" name="upload_form" id="upload_form" enctype="multipart/form-data" action="upload.php"> <input type="hidden" name="form_submit" value="1"/> <label>Upload Image</label> <input type="file" name="images[]" id="upload-images" multiple > <div class="progress none"> <img src="uploading.gif"/> </div> <input type="button" name="upload" id="upload" value="Upload"> </form> |
2) Now you have to write jQuery and Ajax function code to upload multiple images without refreshing the page. Check below code for this.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript"> $(document).ready(function(){ $('#upload').on('click',function(){ $('#upload_form').ajaxForm({ target:'#preview', beforeSubmit:function(e){ $('.progress').show(); }, success:function(e){ $('.progress').hide(); }, error:function(e){ } }).submit(); }); }); </script> |
3) Now you have to write php code for uploading the image files in folder. For this we create a upload.php file.
|
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 |
<?php if($_POST['form_submit'] == 1) { $images_arr = array(); $error=""; foreach($_FILES['images']['name'] as $key=>$val) { $image_name = $_FILES['images']['name'][$key]; $tmp_name = $_FILES['images']['tmp_name'][$key]; //code to check image type $allowed = array('png','jpg','gif','jpeg','JPEG'); $filename = $_FILES['images']['name'][$key]; $ext = pathinfo($filename, PATHINFO_EXTENSION); if(in_array($ext,$allowed)) { //move uploaded file to uploads folder $target_dir = "uploads/"; $target_file = $target_dir.$_FILES['images']['name'][$key]; if(move_uploaded_file($_FILES['images']['tmp_name'][$key],$target_file)){ $images_arr[] = $target_file; } } $error="not valid image type"; } // view images after upload if(!empty($images_arr)){ $count=0; foreach($images_arr as $image_src) { $count++?> <ul class="reorder_ul reorder-photos-list"> <li id="image_li_<?php echo $count; ?>" class="ui-sortable-handle"> <a href="javascript:void(0);" style="float:none;" class="image_link"><img src="<?php echo $image_src; ?>" alt=""></a> </li> </ul> <?php } } } ?> |
By using this simple way, you can easily implement this jQuery Ajax script on your website.
You May Also Like
jQuery Barcode Generator Example
Credit Card Number Validation
jQuery Interactive Parallax Effect for Background Layers
Just follow the steps and upload multiple images using jQuery. If need any help, please write us. Thanks
