Creating a file upload feature with a circular progress bar involves multiple steps. You’ll need to use HTML, CSS, JavaScript (to handle the progress bar), and PHP (to process the file upload on the server). Here’s a basic example of how to achieve this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload with Progress Bar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="upload-container">
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="fileInput" name="file" required>
<button type="submit">Upload</button>
</form>
<div class="progress-circle" id="progressCircle">
<span class="progress-text" id="progressText">0%</span>
</div>
<div id="uploadStatus"></div>
</div>
<script src="script.js"></script>
</body>
</html>
/* styles.css */body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
}
.upload-container {
text-align: center;
}
.progress-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(#4caf50 0% 0%, #e0e0e0 0% 100%);
display: flex;
justify-content: center;
align-items: center;
margin: 20px auto;
}
.progress-text {
font-size: 1.5em;
font-weight: bold;
color: #4caf50;
}
// script.js
document.getElementById('uploadForm').addEventListener('submit', function(e) {
e.preventDefault();
let formData = new FormData();
let fileInput = document.getElementById('fileInput');
formData.append('file', fileInput.files[0]);
let xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
let percentComplete = Math.round((e.loaded / e.total) * 100);
updateProgressBar(percentComplete);
}
});
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('uploadStatus').innerText = 'Upload complete!';
}
};
xhr.send(formData);
});
function updateProgressBar(percent) {
let circle = document.getElementById('progressCircle');
let text = document.getElementById('progressText');
circle.style.background = `conic-gradient(#4caf50 ${percent}%, #e0e0e0 ${percent}% 100%)`;
text.innerText = `${percent}%`;
}
<?php
// upload.php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$uploadDir = 'uploads/';
$uploadFile = $uploadDir . basename($_FILES['file']['name']);
if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {
echo 'File is valid, and was successfully uploaded.';
} else {
echo 'Possible file upload attack!';
}
}
?>
This is a basic implementation. Depending on your needs, you might want to add more features such as:
Ensure your server’s configuration allows for file uploads and is properly secured to prevent potential vulnerabilities.
JSON (JavaScript Object Notation) is a lightweight data-interchange format widely used in web development. At…
AJAX (Asynchronous JavaScript and XML) is a powerful technique used in modern web development that…
Introduction After successfully optimizing your website for speed, it's essential to maintain and build upon…
Securing your WordPress folders is crucial to safeguarding your website from unauthorized access and potential…
Integrating WP Rocket with AWS CloudFront CDN helps to optimize and deliver your website content…
Securing phpMyAdmin is crucial to prevent unauthorized access and protect your databases. Here's a guide…