title: How to create a php upload file with progress bar
body: <p>I would like to know how can I add a progress bar in my php upload file.
  This is my code:</p>
  
  <p>form.html
  <a href="http://pastebin.com/embed_iframe.php?i=mukfyVSz" rel="nofollow">http://pastebin.com/embed_iframe.php?i=mukfyVSz</a></p>
  
  <pre><code>&lt;form id="myForm"  action="action.php" method="post"&gt;
    &lt;input type="file" name="upfile"&gt;
      &lt;input type="hidden" name="MAX_FILE_SIZE" value="10000"&gt;
      &lt;input type="submit" value="Upload"&gt;
  &lt;/form&gt;
  &lt;div style="margin-top:15px;" id="htmlExampleTarget"&gt;&lt;/div&gt;
  
      &lt;script&gt;
      // prepare the form when the DOM is ready
  $(document).ready(function() {
      // bind form using ajaxForm
      $('#myForm').ajaxForm({
          // target identifies the element(s) to update with the server response
          target: '#htmlExampleTarget',
  
          // success identifies the function to invoke when the server response
          // has been received; here we apply a fade-in effect to the new content
         // success: function(data) {
          //    $('.data').html(data);
          //}
      });
  });
      &lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="http://malsup.github.com/jquery.form.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>action.php
  <a href="http://pastebin.com/vhcH7rTT" rel="nofollow">http://pastebin.com/vhcH7rTT</a></p>
  
  <pre><code>&lt;?php
  
  $upload_dir = "./uploads"; // upload folder
  $file_name = $_FILES["upfile"]["name"];
   // MIME TYPES LIST: http://reference.sitepoint.com/html/mime-types-full
   $allowed_types = array("image/gif","image/jpeg","text/html","image/png");
  if(!in_array($_FILES["upfile"]["type"],$allowed_types)) {
      die("Upload non consentito per questo tipo di file. ");
  }
  
  if(trim($_FILES["upfile"]["name"]) == "") {
  die("Error1");
  }
  
  if(@is_uploaded_file($_FILES["upfile"]["tmp_name"])) {
      @move_uploaded_file($_FILES["upfile"]["tmp_name"], "$upload_dir/$file_name")
      or die("Error2");
  } else {
      die("Problems with " . $_FILES["upfile"]["name"]);
  }
  
  echo "&lt;div [class='alert alert-success'&gt;Upload with success " . $_FILES["upfile"]"name"] . "&lt;/div&gt;";
  ?&gt;
  </code></pre>