kost/ul.php

## ul.php
<?php
# quick and dirty upload script.
# recommended to use destination out of the web root or you should do additional checks (like extension uploaded)
$DESTINATION="/out/of/web/root";

error_reporting(0);
if(isset($_FILES['images']))
{
	$ddir = date("Y-m-d-H-i-s");
	$cdir = $DESTINATION."/".$ddir;
	if (!file_exists($cdir)) {
		mkdir($cdir, 0777, true);
	}
	for($count = 0; $count < count($_FILES['images']['name']); $count++)
	{
		# $extension = pathinfo($_FILES['images']['name'][$count], PATHINFO_EXTENSION);
		# $new_name = uniqid() . '.' . $extension;
		$new_name = $cdir . "/" . basename($_FILES['images']['name'][$count]);
		$ret=move_uploaded_file($_FILES['images']['tmp_name'][$count], $new_name);
		if (!$ret) {
			header('X-PHP-Response-Code: 500', true, 500);
			die("Error in upload! Check dest dir!");
		}

	}
	die('success');
}
?>
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <title>Upload</title>
    </head>
    <body>

        <div class="container">
            <h1 class="mt-3 mb-3 text-center">Upload</h1>

            <div class="card">
                <div class="card-header">Select File</div>
                <div class="card-body">
                    <table class="table">
                        <tr>
                            <td width="30%" align="right"><b>Select File</b></td>
                            <td width="70%">
				<form method="POST">
				<div class="file-upload-wrapper">
                                <input type="file" name="images" id="select_file" class="file-upload" data-height="250" multiple />
				<input type="submit" id="submitfile">
				</div>
				</form>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <br />
            <div class="progress" id="progress_bar" style="display:none; ">

                <div class="progress-bar" id="progress_bar_process" role="progressbar" style="width:0%">0%</div>

            </div>

            <div id="uploaded_image" class="row mt-5"></div>
        </div>
	<form>
	<div class="container">
	<div class="card">
	<input class="form-control" type="submit" id="submitclear" value="Clear" onsubmit="clearlog()" />
	</form>
	<div id="logdiv"><textarea class="form-control" id="log" cols="70" rows="10"></textarea></div>
	</div>
	</div>
    </body>
</html>

<script>

function _(element)
{
    return document.getElementById(element);
}

function addlog(text) {
    _('log').value +=  text + '\r\n';
}

function clearlog()
{
	_('log').value='';
}

_('submitclear').onchange = function(event){
	clearlog();
}

_('select_file').onchange = function(event){

    var form_data = new FormData();

    var image_number = 1;

    var error = '';

    for(var count = 0; count < _('select_file').files.length; count++)
    {
        form_data.append("images[]", _('select_file').files[count]);
        addlog('Uploading '+ _('select_file').files[count].name + "("+_('select_file').files[count].size+" bytes)");
        image_number++;
    }

    if(error != '')
    {
        _('uploaded_image').innerHTML = error;

        _('select_file').value = '';
    }
    else
    {
        _('progress_bar').style.display = 'block';

        var ajax_request = new XMLHttpRequest();

        ajax_request.open("POST", "<?= $_SERVER['PHP_SELF'] ?>");

        ajax_request.upload.addEventListener('progress', function(event){

            var percent_completed = Math.round((event.loaded / event.total) * 100);

            _('progress_bar_process').style.width = percent_completed + '%';

            _('progress_bar_process').innerHTML = percent_completed + '% completed';

        });

        ajax_request.addEventListener('load', function(event){
	    if(ajax_request.readyState == 4 && ajax_request.status == 200) {
            _('uploaded_image').innerHTML = '<div class="alert alert-success">Files Sent Successfully</div>';
			} else {

		 _('uploaded_image').innerHTML = '<div class="alert alert-danger">Files Not Sent Successfully</div>';
		 addlog(ajax_request.responseText);
		}
            _('select_file').value = '';
        });

        ajax_request.send(form_data);
    }

};

</script>
	<?php
	# quick and dirty upload script.
	# recommended to use destination out of the web root or you should do additional checks (like extension uploaded)
	$DESTINATION="/out/of/web/root";

	error_reporting(0);
	if(isset($_FILES['images']))
	{
	$ddir = date("Y-m-d-H-i-s");
	$cdir = $DESTINATION."/".$ddir;
	if (!file_exists($cdir)) {
	mkdir($cdir, 0777, true);
	}
	for($count = 0; $count < count($_FILES['images']['name']); $count++)
	{
	# $extension = pathinfo($_FILES['images']['name'][$count], PATHINFO_EXTENSION);
	# $new_name = uniqid() . '.' . $extension;
	$new_name = $cdir . "/" . basename($_FILES['images']['name'][$count]);
	$ret=move_uploaded_file($_FILES['images']['tmp_name'][$count], $new_name);
	if (!$ret) {
	header('X-PHP-Response-Code: 500', true, 500);
	die("Error in upload! Check dest dir!");
	}

	}
	die('success');
	}
	?>
	<!doctype html>
	<html lang="en">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

	<title>Upload</title>
	</head>
	<body>

	<div class="container">
	<h1 class="mt-3 mb-3 text-center">Upload</h1>

	<div class="card">
	<div class="card-header">Select File</div>
	<div class="card-body">
	<table class="table">
	<tr>
	<td width="30%" align="right"><b>Select File</b></td>
	<td width="70%">
	<form method="POST">
	<div class="file-upload-wrapper">
	<input type="file" name="images" id="select_file" class="file-upload" data-height="250" multiple />
	<input type="submit" id="submitfile">
	</div>
	</form>
	</td>
	</tr>
	</table>
	</div>
	</div>
	<br />
	<div class="progress" id="progress_bar" style="display:none; ">

	<div class="progress-bar" id="progress_bar_process" role="progressbar" style="width:0%">0%</div>

	</div>

	<div id="uploaded_image" class="row mt-5"></div>
	</div>
	<form>
	<div class="container">
	<div class="card">
	<input class="form-control" type="submit" id="submitclear" value="Clear" onsubmit="clearlog()" />
	</form>
	<div id="logdiv"><textarea class="form-control" id="log" cols="70" rows="10"></textarea></div>
	</div>
	</div>
	</body>
	</html>

	<script>

	function _(element)
	{
	return document.getElementById(element);
	}

	function addlog(text) {
	_('log').value += text + '\r\n';
	}

	function clearlog()
	{
	_('log').value='';
	}

	_('submitclear').onchange = function(event){
	clearlog();
	}

	_('select_file').onchange = function(event){

	var form_data = new FormData();

	var image_number = 1;

	var error = '';

	for(var count = 0; count < _('select_file').files.length; count++)
	{
	form_data.append("images[]", _('select_file').files[count]);
	addlog('Uploading '+ _('select_file').files[count].name + "("+_('select_file').files[count].size+" bytes)");
	image_number++;
	}

	if(error != '')
	{
	_('uploaded_image').innerHTML = error;

	_('select_file').value = '';
	}
	else
	{
	_('progress_bar').style.display = 'block';

	var ajax_request = new XMLHttpRequest();

	ajax_request.open("POST", "<?= $_SERVER['PHP_SELF'] ?>");

	ajax_request.upload.addEventListener('progress', function(event){

	var percent_completed = Math.round((event.loaded / event.total) * 100);

	_('progress_bar_process').style.width = percent_completed + '%';

	_('progress_bar_process').innerHTML = percent_completed + '% completed';

	});

	ajax_request.addEventListener('load', function(event){
	if(ajax_request.readyState == 4 && ajax_request.status == 200) {
	_('uploaded_image').innerHTML = '<div class="alert alert-success">Files Sent Successfully</div>';
	} else {

	_('uploaded_image').innerHTML = '<div class="alert alert-danger">Files Not Sent Successfully</div>';
	addlog(ajax_request.responseText);
	}
	_('select_file').value = '';
	});

	ajax_request.send(form_data);
	}

	};

	</script>