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>