<?php
if ($_POST['action'] == 'callThisFunction'){echo executeFunction();}
function executeFunction() {file_put_contents(__DIR__ . '/logfile.log', '');
return 'completed';}
?>

Определение модального окна на странице

<div class="overlay" id="overlay"></div>
<div class="modal" id="modal">
<div class="top_log">
<div style="width:100%; height:1px; clear:both;"></div>
<div style="text-align:left;" class="line_block">Access Log</div>
<div class="line_block" style="text-align:right;"><span id="close" style="cursor:pointer">Close</span></div>
<div style="width:100%; height:1px; clear:both;"></div>
</div><div id="log" class="log" style="text-align:left"></div></div>

Кнопки выбора дейстия

<input type="button" class="log_button" id="open_log" value="Open the Log File">
<input type="button" class="log_button" id="save_log" value="Save the Log File">
<input type="button" class="log_button" id="triggerPhp" value="Clear the Log File">

Открытие модального окна журнала Access Log с данными

<script type='text/javascript'>
$(document).ready(function(){
$('#open_log').click(function(){
$.get("logfile.log").then(function(data) {
$('#log').html(data);
});
$('#overlay').css('display', 'block').animate({opacity:0.7}, 500);
$('#modal').css('display', 'block').animate({opacity:1}, 500);
$('#modal').css('visibility', 'visible');
$('#overlay').css('visibility', 'visible');
});});
</script>

Закрытие модального окна

<script type='text/javascript'>
$(document).ready(function(){
$('#overlay,#close').click(function(){
$('#modal').animate({opacity:0}, 500);
$('#overlay').animate({opacity:0}, 500);
function notdisplay(){
$('#modal').css('visibility', 'hidden');
$('#modal').css('display', 'none');
$('#overlay').css('visibility', 'hidden');
$('#overlay').css('display', 'none');}
setTimeout(notdisplay, 1000);
});});
</script>

Сохранение записей журнала на локальном диске

<script type='text/javascript'>
$(document).ready(function(){
$('#save_log').on('click', function(){
var link = document.createElement('a');
link.setAttribute('href', './logfile.log');
link.setAttribute('download', 'logfile.log');
link.click();
return false;
});
});
</script>

Удаление всех записей в журнале Access Log

<script type='text/javascript'>
$('#triggerPhp').click(() => {
$.alertable.confirm('Журнал Access Log будет очищен без возможности восстановления записей').then(function() {
$.post("logfile.php", {action:'callThisFunction'}, function(response){
console.log(response);
});
});
});
</script>

<script type='text/javascript'>
$(document).ready(function(){
if (window.File && window.FileReader && window.FileList && window.Blob) {var ok = 'OK';}
else {alert('File API не поддерживается данным браузером');}
if(ok === 'OK'){
const dropZone = document.getElementById('dropZone');
if (dropZone) {
let hoverClassName = 'hover';
dropZone.addEventListener("dragenter", function(e) {
e.preventDefault();
dropZone.classList.add(hoverClassName);
});
dropZone.addEventListener("dragover", function(e) {
e.preventDefault();
dropZone.classList.add(hoverClassName);
});
dropZone.addEventListener("dragleave", function(e) {
e.preventDefault();
dropZone.classList.remove(hoverClassName);
});
dropZone.addEventListener("drop", function(e) {
e.preventDefault();
dropZone.classList.remove(hoverClassName);
const files = Array.from(e.dataTransfer.files);
const fileName = files[0].name;
const fileType = files[0].type;
const fileSize = files[0].size;
$('#lastname').html(fileName);
var size = Math.round(fileSize*10/1024/1024)/10; // -- Оценка размера файла
if(size > 2){
$.alertable.alert('Размер файла '+size+' Мбайт превышает максимально допустимый 2 Мбайт');}
else{
var extension = fileName.substring(fileName.lastIndexOf('.') + 1);
// -- Разрешенные типы файлов
switch (extension) {
case 'jpg':
case 'jpeg':
case 'gif':
case 'png':
case 'webp':
case 'mp3':
case 'ogg':
case 'mp4':
case 'mpeg':
case 'webm':
var type = true;
break;
default: $.alertable.alert('Файл '+fileName+' не разрешен для загрузки на сервер');
}
if(type == true){
if (files.length > 0) {
const data = new FormData();
for (const file of files) {
data.append('file', file);
}
fetch('uploads/', {
method: 'POST',
body: data
})
.then(
setTimeout("$('#uploaded').css('display','block'), $('#uploaded').animate({opacity: 1}, 500)", 1000)
)
.catch(reason => console.error(reason));
}
}}
});
}}
});
</script>

<script type='text/javascript'>
function lastname(){
$('#uploaded').animate({opacity: 0}, 700);
setTimeout("$('#uploaded').css('display','none')", 1000);
}
</script>