File size: 5,116 Bytes
c9af98b 71d8d37 c9af98b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
<!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;
}
#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>Отправка HTML файла с пользовательским именем</h1>
<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="/up_page">
<input type="file" name="file" accept=".html">
<input type="text" name="filename" placeholder="Enter filename (without .html)">
<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', '/up_page');
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;
if (event.target.status === 200) {
var fullUrl = response.split('saved to ')[1];
document.getElementById('imageUrl').innerText = 'Click to copy URL';
document.getElementById('imageUrl').setAttribute('data-url', fullUrl);
Toastify({
text: "File uploaded successfully",
duration: 3000,
gravity: "top",
position: "center",
backgroundColor: "#4CAF50",
}).showToast();
} else if (event.target.status === 409) {
Toastify({
text: "File with this name already exists",
duration: 3000,
gravity: "top",
position: "center",
backgroundColor: "#FF5733",
}).showToast();
}
document.getElementById('progressBar').style.width = '0%';
document.getElementById('progressBar').innerText = '0%';
}, false);
request.send(formData);
});
function copyToClipboard(element) {
var tempInput = document.createElement("input");
tempInput.value = element.getAttribute('data-url');
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> |