Skip to end of metadata
Go to start of metadata

Uploading files serially is strongly needed when uploading large files to the server, because it helps user to ensure the uploaded file is correctly delivered or not, so they can do the necessary things easily.

What I wanted to achieve is to select multiple files at once, upload files one by one, and show its uploading progress in real-time. And below is what I implemented as a result of the implementation when the uploading is complete:


The below is the form side code based on javascript

form.html
<!-- multiple file uploading example by Chun Kang -->
<html>
<head>
	<title>PHP upload file demo</title>
</head>
<script>
function _(el)
{
    return document.getElementById(el);
}

function formatNumber(num) {
  return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}

var upload_index=0;
var upload_obj_id;
var upload_filename;

function completeCTHandler(event)
{
//	_(upload_obj_id).innerHTML = event.target.responseText;
	uploadFiles(upload_index);
}

function progressCTHandler(event)
{
	if (event.lengthComputable)
	{
		var percentage = Math.round(event.loaded/event.total*100);
		_(upload_obj_id).innerHTML
			= upload_filename + formatNumber(event.loaded) + "/" + formatNumber(event.total) + " bytes uploaded (" + percentage.toString() + "%)<br>" 
			+  "<progress id=\"progressBar\" value=\"" + percentage.toString() + "\" max=\"100\"></progress><br>";
			
	}
}

function uploadFiles(i)
{
	if (!i)
	{
		_("upload_form").style.display = "none";
		_("upload_info").innerHTML = "";
	}
	upload_index=i;

	// var file = _("customthumbnail").files[0];
	total_files = _("files").files.length;
	if (i<total_files)
	{
		upload_index++;
		upload_obj_id = "upload_info" + upload_index.toString();
		upload_filename = _("files").files[i].name;
		_("upload_info").innerHTML += "<div id=\"" + upload_obj_id + "\"></div>";

		var formdata = new FormData();
		formdata.append("whoami", "CK");
		formdata.append("files[]", _("files").files[i]);

		var ajax = new XMLHttpRequest();
		ajax.addEventListener("load", completeCTHandler, false);
		ajax.upload.addEventListener("progress", progressCTHandler, false);
		ajax.open("POST", "submit_upload.php");
		ajax.send(formdata);
	}
}
</script>
<body>
<div id="upload_form">
<form method="post" enctype="multipart/form-data" name="formUploadFile">
	<label>Select files to upload:</label>
	<input type="file" id="files" name="files[]" multiple="multiple" />
	<input type="button" value="Upload File" onClick="uploadFiles(0)"/>
</form>
</div>
<div id="upload_info"></div>
</body>
</html>


submit_upload.php
<?php
/* Programmed by Chun Kang <http://qsok.com>
 *  
 * @file submit_upload.php
 * @author Chun Kang (ck@qsok.com)
 * 
**/

if(isset($_POST["whoami"]))
{
	$errors = array();
	$uploadedFiles = array();
	$UploadFolder = "upload";
				
	$counter = 0;

	/*
		
		$_FILES["files"] Array
		(
		    [name] => Array
		        (
		            [0] => channel_representative_image_BilliadsTV_1920x1080.jpg
		            [1] => channel_representative_image_honey_1920x1080.jpeg
		            [2] => channel_representative_image_idap_1920x1080.jpeg
		            [3] => channel_representative_image_mubeat_1920x1080.jpg
		            [4] => channel_representative_image_muKbang_1920x1080.jpg
		        )

		    [type] => Array
		        (
		            [0] => image/jpeg
		            [1] => image/jpeg
		            [2] => image/jpeg
		            [3] => image/jpeg
		            [4] => image/jpeg
		        )

		    [tmp_name] => Array
		        (
		            [0] => /tmp/php4Mfw5C
		            [1] => /tmp/phpfSF3XV
		            [2] => /tmp/phpyzCFEf
		            [3] => /tmp/phpDRHBnz
		            [4] => /tmp/phpSzSCaT
		        )

		    [error] => Array
		        (
		            [0] => 0
		            [1] => 0
		            [2] => 0
		            [3] => 0
		            [4] => 0
		        )

		    [size] => Array
		        (
		            [0] => 1707487
		            [1] => 2494888
		            [2] => 1327434
		            [3] => 1912188
		            [4] => 1806818
		        )

		)
	*/				

	foreach($_FILES["files"]["tmp_name"] as $i=>$tmp_name)
	{
		$temp = $_FILES["files"]["tmp_name"][$i];
		$name = $_FILES["files"]["name"][$i];
					
		if(empty($temp))
		{
			break;
		}
					
		$counter++;
		$UploadOk = true;

					
		if(file_exists($UploadFolder."/".$name) == true)
		{
			$UploadOk = false;
			array_push($errors, $name." file is already exist.");
		}
					
		if($UploadOk == true)
		{
			if (!file_exists($UploadFolder)) mkdir($UploadFolder);
			move_uploaded_file($temp, $UploadFolder."/".$name);
			array_push($uploadedFiles, $name);
		}
	}
				
	if($counter>0)
	{
		if(count($errors)>0)
		{
			echo "<b>Errors:</b>";
			echo "<br/><ul>";
			foreach($errors as $error)
			{
				echo "<li>".$error."</li>";
			}
			echo "</ul><br/>";
		}
					
		if(count($uploadedFiles)>0)
		{
			echo "<b>Uploaded Files:</b>";
			echo "<br/><ul>";
			foreach($uploadedFiles as $fileName)
			{
				echo "<li>".$fileName."</li>";
			}
			echo "</ul><br/>";
			
			echo count($uploadedFiles)." file(s) are successfully uploaded.";
		}								
	}
	else
	{
		echo "Please, Select file(s) to upload.";
	}
}
?>