title: PHP Multiple File Upload with Progress Bar Not Working using JSON and Javascript
body: <p>My Site contains 3 parts: HTML form, PHP File Upload Script, and the Javascript. I followed this tutorial here: <a href="http://www.w3bees.com/2013/12/multiple-file-upload-with-progress-bar.html?showComment=1391833500872#c6704017175905292593" rel="nofollow">http://www.w3bees.com/2013/12/multiple-file-upload-with-progress-bar.html?showComment=1391833500872#c6704017175905292593</a></p>
  
  <p>The file upload portion works great (PHP will upload any files with no problem), however the progress bar does not change, it stays at 0% the whole time.</p>
  
  <p>Here is my entire index.php with HTML form near the bottom:</p>
  
  <pre><code>&lt;head&gt;
  &lt;style type="text/css" media="screen"&gt;
       div#banner_left {
         position: absolute;
         top: 0%;
         left: 0%;
         width: auto;
       }
       div#banner_right {
         float: right;
         width: auto;
       }
      &lt;/style&gt;
  &lt;link rel="stylesheet" type="text/css" href="/css/structure.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="/css/pure-min.css"
  &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.form.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/uploader.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="banner_left"&gt;
  &lt;img src="js/logo_ryerson.gif"/&gt;
  &lt;/div&gt;
  &lt;br&gt;&lt;br&gt;&lt;div class="img"&gt;
  &lt;img src="/images/logo.png" /&gt;
  &lt;/div&gt;&lt;center&gt;&lt;br&gt;&lt;br&gt;
  &lt;div class="status"&gt;&lt;/div&gt;
  &lt;form enctype="multipart/form-data" action="upload.php" method="POST"&gt;
  Choose Document Type:
  &lt;select name="document_type"&gt;
  &lt;option value="None"&gt;Pick Document Type&lt;/option&gt;
  &lt;option value="Textbooks"&gt;Notes&lt;/option&gt;
  &lt;/select&gt;&lt;br&gt;
  Choose Course Code:
  &lt;select name="subject_list"&gt;
  &lt;option value="None"&gt;Pick Course&lt;/option&gt;
  &lt;option value="ACC 100"&gt;ACC 100&lt;/option&gt;
  &lt;option value="ACC 406"&gt;ACC 406&lt;/option&gt;
  &lt;option value="Other"&gt;Other&lt;/option&gt;
  &lt;/select&gt;&lt;br&gt;
  Choose file(s) to upload (Max 500MB): &lt;input name="files[]" type="file" id="files" multiple="multiple" /&gt;
  &lt;input type="submit" name="submit" value="Upload" /&gt;
  &lt;/form&gt;&lt;br&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;footer id="main"&gt;
    &amp;copy; 2014 Rye High Group.  All rights reserved.&lt;/a&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p>Here is my PHP Upload Script: </p>
  
  <pre><code>&lt;?php
  $subject_list = $_POST['subject_list'];
  $document_type = $_POST['document_type'];
  $dir = "/var/www/testsite/uploads/$subject_list/$document_type/";
  $count = 0;
  
  if ($_SERVER['REQUEST_METHOD'] == 'POST' and isset($_FILES['files']))
  {
    // loop all files
    foreach ( $_FILES['files']['name'] as $i =&gt; $name )
    {
      // if file not uploaded then skip it
      if ( !is_uploaded_file($_FILES['files']['tmp_name'][$i]) )
        continue;
  
      // now we can move uploaded files
        if( move_uploaded_file($_FILES["files"]["tmp_name"][$i], $dir . $name) )
          $count++;
    }
  
    echo json_encode(array('count' =&gt; $count));
  
  }
  ?&gt;
  </code></pre>
  
  <p>AND Finally my upload.js (the rest uses Jquery however upload.js is my code):</p>
  
  <pre><code>$(function() {
    /* variables */
    var status = $('.status');
    var percent = $('.percent');
    var bar = $('.bar');
  
    /* submit form with ajax request using jQuery.form plugin */
    $('form').ajaxForm({
  
      /* set data type json */
      dataType:'json',
  
      /* reset before submitting */
      beforeSend: function() {
        status.fadeOut();
        bar.width('0%');
        percent.html('0%');
      },
  
      /* progress bar call back*/
      uploadProgress: function(event, position, total, percentComplete) {
        var pVel = percentComplete + '%';
        bar.width(pVel);
        percent.html(pVel);
      },
  
      /* complete call back */
      complete: function(data) {
        status.html(data.responseJSON.count + ' Files uploaded!').fadeIn();
      }
  
    });
  });
  </code></pre>