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.
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.";
}
}
?>