<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>File Upload</title> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"> <style> body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0; margin: 0; padding: 0; } h1 { background-color: #4CAF50; color: white; padding: 20px; margin: 0; border-bottom: 2px solid #388E3C; } button[type="submit"] { color: white; background-color: #4CAF50; border: none; cursor: pointer; padding: 10px 20px; font-size: 16px; border-radius: 5px; margin-top: 20px; } button[type="submit"]:hover { background-color: #388E3C; } #mediaContainer { margin-top: 20px; display: flex; justify-content: center; align-items: center; flex-direction: column; max-width: 100%; height: auto; } #mediaContainer img, #mediaContainer video { max-width: 100%; height: auto; object-fit: contain; } #imageUrl { margin-top: 20px; font-size: 16px; color: #333; cursor: pointer; text-decoration: underline; } #progressBarContainer { width: 80%; margin: 20px auto; background-color: #ddd; border-radius: 13px; padding: 3px; } #progressBar { width: 0%; height: 20px; background-color: #4CAF50; border-radius: 10px; text-align: center; line-height: 20px; color: white; } </style> </head> <body> <h1>Отправка сообщения (текст + файл) с рандомизацией</h1> <div id="mediaContainer"> <!-- Media content will be displayed here --> </div> <div id="progressBarContainer"> <div id="progressBar">0%</div> </div> <div id="imageUrl" onclick="copyToClipboard(this)">Кликните после загрузки, если нужна ссылка на сохранённый файл.</div> <form id="uploadForm" enctype="multipart/form-data" method="post" action="/upload"> <input type="file" name="file"> <button type="submit">Загрузить</button> </form> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script> <script> document.getElementById('uploadForm').addEventListener('submit', function(event) { event.preventDefault(); var formData = new FormData(this); var request = new XMLHttpRequest(); request.open('POST', '/upload'); request.upload.addEventListener('progress', function(event) { if (event.lengthComputable) { var percentComplete = (event.loaded / event.total) * 100; document.getElementById('progressBar').style.width = percentComplete + '%'; document.getElementById('progressBar').innerText = Math.round(percentComplete) + '%'; } }, false); request.addEventListener('load', function(event) { var response = event.target.responseText; var fullUrl = response.split('saved to ')[1]; var filename = fullUrl.split('/').pop(); document.getElementById('imageUrl').innerText = fullUrl; displayMedia(fullUrl); document.getElementById('progressBar').style.width = '0%'; document.getElementById('progressBar').innerText = '0%'; // Сохранение имени файла и ссылки в локальное хранилище localStorage.setItem('filename', filename); localStorage.setItem('fileUrl', fullUrl); }, false); request.send(formData); }); function displayMedia(url) { var mediaContainer = document.getElementById('mediaContainer'); mediaContainer.innerHTML = ''; var extension = url.split('.').pop().toLowerCase(); if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) { var img = document.createElement('img'); img.src = url; mediaContainer.appendChild(img); } else if (['mp4', 'webm', 'ogg'].includes(extension)) { var video = document.createElement('video'); video.src = url; video.controls = true; mediaContainer.appendChild(video); } else if (['mp3', 'wav', 'ogg'].includes(extension)) { var audio = document.createElement('audio'); audio.src = url; audio.controls = true; mediaContainer.appendChild(audio); } else { mediaContainer.innerText = 'Unsupported file type'; } } function copyToClipboard(element) { var tempInput = document.createElement("input"); tempInput.value = element.innerText; document.body.appendChild(tempInput); tempInput.select(); document.execCommand("copy"); document.body.removeChild(tempInput); Toastify({ text: "URL copied to clipboard", duration: 3000, gravity: "top", position: "center", backgroundColor: "#4CAF50", }).showToast(); } </script> </body> </html>