Skip to end of metadata
Go to start of metadata

Array in HTML5 is useful when upload files with multi selection on file management dialog. Note that you should add tag (multiple="multiple") to the "file" type element. In the PHP, you will be able to manage uploaded files easily by index.

form.php
<!-- multiple file uploading example by Chun Kang -->
<html>
	<head>
		<title>PHP upload file demo</title>
	</head>
	<body>
		<form method="post" enctype="multipart/form-data" name="formUploadFile" action="submit_upload.php">		
			<label>Select files to upload:</label>
			<input type="file" id="files" name="files[]" multiple="multiple" />
			<input type="submit" value="Chun Kang" name="whoami"/>
		</form>		
	</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();
	$extension = array("jpeg","jpg","png","gif");
	$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;
					
		$ext = strtolower(pathinfo($name, PATHINFO_EXTENSION));
		if(in_array($ext, $extension) == false)
		{
			$UploadOk = false;
			array_push($errors, $name." is invalid file type.");
		}
					
		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.";
	}
}
?>

Following is an example of uploading files in JQuery

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

function completeCTHandler(event){
	_("upload_info").innerHTML = event.target.responseText;
}

function uploadFiles()
{
	_("upload_info").innerHTML = "Uploading....<br><br>";

	var formdata = new FormData();
	formdata.append("whoami", "Chun Kang");
	total_files = _("files").files.length;
	for( var i=0; i<total_files; i++) formdata.append("files[]", _("files").files[i]);

	var ajax = new XMLHttpRequest();
	ajax.addEventListener("load", completeCTHandler, false);
	ajax.open("POST", "submit_upload.php");
	ajax.send(formdata);
}
</script>

<body>
<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()"/>
</form>
<div id="upload_info"></div>
</body>
</html>

Uploading multiple with progress bar

multi_file_uploading_form.php
<!-- 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,')
}

function completeCTHandler(event)
{
	_("upload_info").innerHTML = event.target.responseText;
}

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

function uploadFiles()
{
	_("upload_form").style.display = "none";
	_("upload_info").innerHTML = "Uploading....<br><br>";

	var formdata = new FormData();
	formdata.append("whoami", "CK");
	total_files = _("files").files.length;
	for( var i=0; i<total_files; i++) 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()"/>
</form>
</div>
<div id="upload_info"></div>
</body>
</html>