Multiple File Upload with Progress Bar using PHP and HTML

Question

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.

here is my html form data:

<form enctype="multipart/form-data" action="uploader.php" method="POST">
Choose Course Code:
<select name="subject_list">
<option value="ACC 100">ACC 100</option>
<option value="ACC 406">ACC 406</option>
<option value="ECN 104">ECN 104</option>
<option value="ECN 204">ECN 204</option>
<option value="FIN 300">FIN 300</option>
<option value="GMS 200">GMS 200</option>
<option value="ITM 100">ITM 100</option>
<option value="ITM 301">ITM 301</option>
<option value="ITM 305">ITM 305</option>
<option value="ITM 330">ITM 330</option>
<option value="ITM 350">ITM 350</option>
<option value="ITM 407">ITM 407</option>
<option value="ITM 500">ITM 500</option>
<option value="ITM 501">ITM 501</option>
<option value="ITM 505">ITM 505</option>
<option value="ITM 600">ITM 600</option>
<option value="LAW 122">LAW 122</option>
<option value="SSH 105">SSH 105</option>
<option value="Other">Other</option>
</select><br>
Choose a file to upload (Max 500MB): <input name="rye_file[]" type="file" id="file_style" multiple />
<input type="submit" name="submit" value="Upload" />
</form> 
<form action="/logout.php">
<input type="submit" value="Logout">
</form>

and here is my backend:

<?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<count($fdata['name']);++$i){
  $files[]=array(
   'name'     => $fdata['name'][$i],
   'tmp_name' => $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";
 }
?>

So you want to do something dynamic on client side without any scripting? Doesn't seem logical to me. — Al Kepp
– Al Kepp, Commented Feb 28, 2013 at 20:12
Its possible using HTML5 I'm pretty sure. However I will accept an answer with javascript if thats the most compatible way (cross-browser) — fixnode
– fixnode, Commented Feb 28, 2013 at 20:33
You can use a little div with a flash (if you have Adobe flash) to comunicate with a PHP script to make that bar easy, here is an example: php.dzone.com/articles/flash-php-file-upload — Ricardo Ortega Magaña
– Ricardo Ortega Magaña, Commented Feb 28, 2013 at 21:36

Steward Godwin Jornsen · Accepted Answer · 2013-02-28 21:30:06Z

1

It might not be what you want, but I'd suggest you try

uploadify http://www.uploadify.com [free] , there is also an html5 version. Sometimes, I try not to reinvent the wheels.
If you concerned about the fee for uploadify, how about blueimp http://blueimp.github.com/jQuery-File-Upload/
Like HTML5 so much, try http://www.igloolab.com/jquery-html5-uploader/ (You'd pay for this one with a Tweet or a Facebook post. How great is that?)
A few other options: http://www.fyneworks.com/jquery/multiple-file-upload/
Valums: https://github.com/valums/file-uploader (fine_uploader available for $15 one time pay) - makes sense.

Please note that you'd have to make use of Jquery, if you okay with that.

edited Feb 28, 2013 at 21:30

answered Feb 28, 2013 at 20:56

Steward Godwin Jornsen

1,1791 gold badge7 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

fixnode Over a year ago

problem with uploadify is that only the flash version is free. The HTML5 version is paid. I'm doing this for a school project (document collaboration) hence I do not want to pay for code. Although it is a great concept

Steward Godwin Jornsen Over a year ago

Any downside in using the flash version?

Steward Godwin Jornsen Over a year ago

Just to give you more options, I've provided links to even html5 version and version that you don't need to pay for.

Collectives™ on Stack Overflow

Multiple File Upload with Progress Bar using PHP and HTML

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related