I am trying to code a file uploading process. When i will click browse button, the file will be uploaded on server and display that file contents without clicking submit button. When i upload file of large size, the upload will take more time, so i needed to implement a progressbar.
I have referred to the following useful links:
http://malsup.com/jquery/form/progress.html
http://malsup.com/jquery/form/#file-upload
I want the progress bar to be displayed automatically when i will click browse button. I don't know how to call the progress bar function, when i select the file in the browse window, without clicking submit Button.
I used the following code.
File : index.php
<!doctype html> <head> <title>File Upload Progress Demo #1</title> <style> body { padding: 30px } form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px } .progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; } .bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; } .percent { position:absolute; display:inline-block; top:3px; left:48%; } </style> </head> <body> <form action="upload.php" method="post" enctype="multipart/form-data" id="hello"> <input type="file" name="uploadedfile" ><br> <input type="submit" value="Upload File to Server" > </form> <div class="progress"> <div class="bar"></div > <div class="percent">0%</div > </div> <div id="status"></div> <script src="jquery.js"></script> <script src="jquery.form.js"></script> <script> (function() { var bar = $('.bar'); var percent = $('.percent'); var status = $('#status'); $('#hello').ajaxForm({ beforeSend: function() { status.empty(); var percentVal = '0%'; bar.width(percentVal) percent.html(percentVal); }, uploadProgress: function(event, position, total, percentComplete) { var percentVal = percentComplete + '%'; bar.width(percentVal) percent.html(percentVal); }, complete: function(xhr) { bar.width("100%"); percent.html("100%"); status.html(xhr.responseText); } }); })(); </script> </body> </html> File : upload.php
<?php $target_path = "upload/"; $target_path = $target_path . basename( $_FILES['uploadedfile']['name']); if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) { echo "The file ". basename( $_FILES['uploadedfile']['name']). " has been uploaded"; } else{ echo "There was an error uploading the file, please try again!"; } ?> 
