D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
proc
/
self
/
root
/
proc
/
self
/
root
/
home
/
markniuj
/
bazmeasar.com
/
admin
/
mp4-bar
/
Filename :
index.html
back
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title>Upload File with Progress Bar</title> <style> #progressBar { width: 100%; background-color: #ddd; margin-top: 20px; } #progressBarFill { width: 0%; height: 30px; background-color: #4caf50; text-align: center; line-height: 30px; color: white; } </style> </head> <body> <h1>Upload File with Progress Bar</h1> <input type="file" id="fileInput"> <button onclick="uploadFile()">Upload</button> <div id="progressBar"> <div id="progressBarFill"></div> </div> <div id="progressStatus"></div> <script> function uploadFile() { const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; const formData = new FormData(); formData.append('file', file); const xhr = new XMLHttpRequest(); xhr.open('POST', 'upload.php'); xhr.upload.onprogress = function(event) { if (event.lengthComputable) { const progressBarFill = document.getElementById('progressBarFill'); const progressStatus = document.getElementById('progressStatus'); const percentage = (event.loaded / event.total) * 100; progressBarFill.style.width = percentage + '%'; progressStatus.innerHTML = Math.round(percentage) + '% uploaded'; } }; xhr.onload = function() { if (xhr.status === 200) { const progressStatus = document.getElementById('progressStatus'); progressStatus.innerHTML = 'Upload complete!'; } }; xhr.send(formData); } </script> </body> </html>