Index.html
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 | <!DOCTYPE html> <html> <head> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet" /> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.form.js"></script> </head> <body> <div class="container"> <br /> <h3 align="center">Ajax File Upload Progress Bar using PHP JQuery</h3> <br /> <div class="panel panel-default"> <div class="panel-heading"><b>Ajax File Upload Progress Bar using PHP JQuery</b></div> <div class="panel-body"> <form id="uploadImage" action="upload.php" method="post"> <div class="form-group"> <label>File Upload</label> <input type="file" name="uploadFile" id="uploadFile" accept=".jpg, .png" /> </div> <div class="form-group"> <input type="submit" id="uploadSubmit" value="Upload" class="btn btn-info" /> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div id="targetLayer" style="display:none;"></div> </form> <div id="loader-icon" style="display:none;"><img src="loader.gif" /></div> </div> </div> </div> </body></html><script>$(document).ready(function(){ $('#uploadImage').submit(function(event){ if($('#uploadFile').val()) { event.preventDefault(); $('#loader-icon').show(); $('#targetLayer').hide(); $(this).ajaxSubmit({ target: '#targetLayer', beforeSubmit:function(){ $('.progress-bar').width('50%'); }, uploadProgress: function(event, position, total, percentageComplete) { $('.progress-bar').animate({ width: percentageComplete + '%' }, { duration: 1000 }); }, success:function(){ $('#loader-icon').hide(); $('#targetLayer').show(); }, resetForm: true }); } return false; });});</script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <?php//upload.phpif(!empty($_FILES)){ if(is_uploaded_file($_FILES['uploadFile']['tmp_name'])) { sleep(1); $source_path = $_FILES['uploadFile']['tmp_name']; $target_path = 'upload/' . $_FILES['uploadFile']['name']; if(move_uploaded_file($source_path, $target_path)) { echo '<img src="'.$target_path.'" class="img-thumbnail" width="300" height="250" />'; } }}?> |
Download Source Code https://bit.ly/2UX6wZi
