title: Multiple File Upload with Progress Bar using PHP and HTML
body: <p>I recently created a script that allows people to upload multiple files using a PHP backend and HTML form. I would like to implement a progress bar so that users do not click on the upload button twice while uploading multiple files. I would like to avoid using javascript or ajax if possible, but at the same time I would like cross browser compatibility. </p>
  
  <p>here is my html form data:</p>
  
  <pre><code>&lt;form enctype="multipart/form-data" action="uploader.php" method="POST"&gt;
  Choose Course Code:
  &lt;select name="subject_list"&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="ECN 104"&gt;ECN 104&lt;/option&gt;
  &lt;option value="ECN 204"&gt;ECN 204&lt;/option&gt;
  &lt;option value="FIN 300"&gt;FIN 300&lt;/option&gt;
  &lt;option value="GMS 200"&gt;GMS 200&lt;/option&gt;
  &lt;option value="ITM 100"&gt;ITM 100&lt;/option&gt;
  &lt;option value="ITM 301"&gt;ITM 301&lt;/option&gt;
  &lt;option value="ITM 305"&gt;ITM 305&lt;/option&gt;
  &lt;option value="ITM 330"&gt;ITM 330&lt;/option&gt;
  &lt;option value="ITM 350"&gt;ITM 350&lt;/option&gt;
  &lt;option value="ITM 407"&gt;ITM 407&lt;/option&gt;
  &lt;option value="ITM 500"&gt;ITM 500&lt;/option&gt;
  &lt;option value="ITM 501"&gt;ITM 501&lt;/option&gt;
  &lt;option value="ITM 505"&gt;ITM 505&lt;/option&gt;
  &lt;option value="ITM 600"&gt;ITM 600&lt;/option&gt;
  &lt;option value="LAW 122"&gt;LAW 122&lt;/option&gt;
  &lt;option value="SSH 105"&gt;SSH 105&lt;/option&gt;
  &lt;option value="Other"&gt;Other&lt;/option&gt;
  &lt;/select&gt;&lt;br&gt;
  Choose a file to upload (Max 500MB): &lt;input name="rye_file[]" type="file" id="file_style" multiple /&gt;
  &lt;input type="submit" name="submit" value="Upload" /&gt;
  &lt;/form&gt; 
  &lt;form action="/logout.php"&gt;
  &lt;input type="submit" value="Logout"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and here is my backend:</p>
  
  <pre><code>&lt;?php
  $subject_list = $_POST['subject_list'];
  $uploaddir = "/var/www/fixnode_website/content/Secure Login/Rye High/uploads/$subject_list";
  $files=array();
  $fdata=$_FILES['rye_file'];
  if(is_array($fdata['name'])){
   for($i=0;$i&lt;count($fdata['name']);++$i){
    $files[]=array(
     'name'     =&gt; $fdata['name'][$i],
     'tmp_name' =&gt; $fdata['tmp_name'][$i],
    );
   }
  }
  else $files[]=$fdata;
  
  foreach ($files as $file) {
    // uploaded location of file is $file['tmp_name']
    // original filename of file is $file['name']
    $move_file = move_uploaded_file($file['tmp_name'], "$uploaddir/".$file['name']);
  }
  if($move_file){
     echo "File is valid, and was successfully uploaded to: $subject_list folder. Please wait, your browser will refresh in 5-10 seconds!";
     header('Refresh: 10; URL=/index.php');
    } 
    else {
       echo "Upload failed";
   }
  ?&gt;
  </code></pre>