title: Show File Upload Progress Bar without click Submit Button
body: <p>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.</p>
  
  <p>I have referred to the following useful links:</p>
  
  <p><a href="http://malsup.com/jquery/form/progress.html" rel="nofollow noreferrer">http://malsup.com/jquery/form/progress.html</a></p>
  
  <p><a href="http://malsup.com/jquery/form/#file-upload" rel="nofollow noreferrer">http://malsup.com/jquery/form/#file-upload</a></p>
  
  <p>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.</p>
  
  <p>I used the following code.</p>
  
  <p><strong>File : index.php</strong></p>
  
  <pre><code>        &lt;!doctype html&gt;
          &lt;head&gt;
          &lt;title&gt;File Upload Progress Demo #1&lt;/title&gt;
          &lt;style&gt;
          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%; }
          &lt;/style&gt;
          &lt;/head&gt;
          &lt;body&gt;
  
                  &lt;form action="upload.php" method="post" enctype="multipart/form-data" id="hello"&gt;
                  &lt;input type="file" name="uploadedfile" &gt;&lt;br&gt;
                  &lt;input type="submit" value="Upload File to Server" &gt;
  
  
              &lt;/form&gt;
  
              &lt;div class="progress"&gt;
                  &lt;div class="bar"&gt;&lt;/div &gt;
                  &lt;div class="percent"&gt;0%&lt;/div &gt;
              &lt;/div&gt;
  
              &lt;div id="status"&gt;&lt;/div&gt;
  
          &lt;script src="jquery.js"&gt;&lt;/script&gt;
          &lt;script src="jquery.form.js"&gt;&lt;/script&gt;
          &lt;script&gt;
          (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);
              }
          }); 
  
          })();       
          &lt;/script&gt;
  
          &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>
  
  <p><strong>File : upload.php</strong></p>
  
  <pre><code>        &lt;?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!";
          }
          ?&gt;
  </code></pre>