Using PHP to upload a file through a HTML form is common, its completely normal in fact however expecting or trying to get a progress bar to track the upload is wacky concept. That’s not how PHP works and doing live changes to a page is best left to JavaScript.
But it is very much possible to get a progress bar for a PHP file upload, getting ideas and examples from here and here on how to do the JavaScript side of things i got a nice working example put together.
The form is style with Bootstrap and some other custom CSS.
Here is index.html
it contains a HTML form to upload a video (.mp4)
<!DOCTYPE html> <html lang="en"> <head> <title>Upload Mp4</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="upload.js"></script> </head> <body> <div class="container"> <div class="row text-center"> <div class="col-2"></div> <div class="col-8"> <form id="upload_form" enctype="multipart/form-data" method="post"> <div class="form-group"> <input type="file" name="uploadingfile" id="uploadingfile"> </div> <div class="form-group"> <input class="btn btn-primary" type="button" value="Upload File" name="btnSubmit" onclick="uploadFileHandler()"> </div> <div class="form-group"> <div class="progress" id="progressDiv"> <progress id="progressBar" value="0" max="100" style="width:100%; height: 1.2rem;"></progress> </div> </div> <div class="form-group"> <h3 id="status"></h3> <p id="uploaded_progress"></p> </div> </form> </div> <div class="col-2"></div> </div> </div> </body> </html>
upload.js
contains the Ajax JavaScript which handles “real time” progress
function _(abc) { return document.getElementById(abc); } function uploadFileHandler() { var file = _("uploadingfile").files[0]; var formdata = new FormData(); formdata.append("uploadingfile", file); var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", errorHandler, false); ajax.addEventListener("abort", abortHandler, false); ajax.open("POST", "upload.php"); ajax.send(formdata); } function progressHandler(event) { var loaded = new Number((event.loaded / 1048576));//Make loaded a "number" and divide bytes to get Megabytes var total = new Number((event.total / 1048576));//Make total file size a "number" and divide bytes to get Megabytes _("uploaded_progress").innerHTML = "Uploaded " + loaded.toPrecision(5) + " Megabytes of " + total.toPrecision(5);//String output var percent = (event.loaded / event.total) * 100;//Get percentage of upload progress _("progressBar").value = Math.round(percent);//Round value to solid _("status").innerHTML = Math.round(percent) + "% uploaded";//String output } function completeHandler(event) { _("status").innerHTML = event.target.responseText;//Build and show response text _("progressBar").value = 0;//Set progress bar to 0 document.getElementById('progressDiv').style.display = 'none';//Hide progress bar } function errorHandler(event) { _("status").innerHTML = "Upload Failed";//Switch status to upload failed } function abortHandler(event) { _("status").innerHTML = "Upload Aborted";//Switch status to aborted }
Here is upload.php
which does the PHP file upload handling
<?php if (!$_FILES["uploadingfile"]["tmp_name"]) {//No file chosen echo "ERROR: Please browse for a file before clicking the upload button."; exit(); } else { $extension = pathinfo($_FILES['uploadingfile']['name'], PATHINFO_EXTENSION);//Gets the file extension if ((($_FILES["uploadingfile"]["type"] == "video/mp4")) && $extension == 'mp4') {//Check if MP4 extension $folderPath = "uploads/";//Directory to put file into $original_file_name = $_FILES["uploadingfile"]["name"];//File name $size_raw = $_FILES["uploadingfile"]["size"];//File size in bytes $size_as_mb = number_format(($size_raw / 1048576), 2);//Convert bytes to Megabytes if (move_uploaded_file($_FILES["uploadingfile"]["tmp_name"], "$folderPath" . $_FILES["uploadingfile"]["name"] . "")) {//Move file echo "$original_file_name upload is complete"; //echo "$original_file_name uploaded to $folderPath it is $size_as_mb Mb."; } } else { echo "File is not a MP4"; exit; } }
Make sure you have an uploads folder, here is the style.css
if you wanted my form style;
body, html { background-color: #0b1025; color: #e8e8e8; } form { margin-top: 50%; background: #191922; border-radius: .3rem; padding: 1.3rem; border: #2274ac40 1px solid; } input { width: 100%; background: #3c4760; border: 0; padding: 20px; border-radius: 6px; margin-bottom: 10px; border: 1px solid #839af5; } .btn { width: 100%; padding: .5rem; border: 0; background: #2b2a60; font-size: 1.2em; color: #fff; text-shadow: 1px 1px 0px rgba(0, 0, 0, .4); box-shadow: 0px 3px 0px #3a41a2; margin-top: 1.2rem; } .btn:hover { background: #1e1e3c; color: #b5b5b5; box-shadow: none; } .form-control { display: block; width: 100%; height: calc(1.5em + .75rem + 2px); padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #d6d8db; background-color: #3c4760; background-clip: padding-box; border: 1px solid #72a7db; border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .progress { background-color: #3fee8c; position: relative; margin: 20px; height: 1.2rem; } .progress-bar { background-color: #7eeed8; width: 100%; height: 1.2rem; } progress::-webkit-progress-value { background: #3fee8c; } progress::-webkit-progress-bar { background: #1e1e3c; } progress::-moz-progress-bar { background: #3fee8c; }