Team_Website/Pages/upload.html
iiooasd 13d6db8c7a Upload
Added the uploading system.
2024-05-10 18:21:45 -07:00

60 lines
No EOL
2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="icon"
type="image/x-icon"
href="/Resources/Favicons/favicon.png"
/>
<link rel="stylesheet" href="/Pages/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
window.addEventListener("DOMContentLoaded", (event) => {
fetch("/Pages/navbar.html")
.then((response) => response.text())
.then((data) => {
document.getElementById("navbar").innerHTML = data;
});
fetch("/Pages/socials.html")
.then((response) => response.text())
.then((data) => {
document.getElementById("socials").innerHTML = data;
});
});
</script>
</head>
<body>
<div id="navbar"></div>
<div class="container">
<h2>Image Uploader</h2>
<p>Here you can upload pictures of the team. Thank you for your suppourt</p>
<form action="/uploaded.html" method="post" enctype="multipart/form-data">
<label for="file-upload" class="upload-btn">Choose Image</label>
<input type="file" id="file-upload" name="file" accept="image/*">
<br>
<br>
<button type="submit" class="up-btn">Upload</button>
</form>
<div id="image-preview">
<h3>Uploaded Image:</h3>
<img id="uploaded-image" src="#" alt="Uploaded Image">
</div>
</div>
<script>
document.getElementById('file-upload').addEventListener('change', function(event) {
const fileInput = event.target;
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = function(e) {
const imagePreview = document.getElementById('uploaded-image');
imagePreview.src = e.target.result;
}
reader.readAsDataURL(file);
});
</script>
<div id="socials"></div>
</body>
</html>