In this tutorial, you will learn how to easily create a progress bar during the AJAX file upload process.
Your progress bar width will gradually increased based on the progress completed.
Here is HTML form for file upload
<form method="post" enctype="multipart/form-data">
<input type="file" name="image" id="image" onchange="upload()"><br>
<progress id="progressBar" value="0" max="100" style="width:250px;"></progress>
<h2 id="status"></h2>
<p id="loadedtotal"></p>
</form>
Here is the javascript code for progress bar using ajax
<script type="text/javascript">
function _(el) {
return document.getElementById(el);
}
function upload() {
var file = _("image").files[0];
var formdata = new FormData();
formdata.append("image", 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", "file_upload.php");
ajax.send(formdata);
}
function progressHandler(event) {
_("loadedtotal").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}
</script>
Here is the file upload php code
if (move_uploaded_file($_FILES['image']['tmp_name'], 'image/' . $_FILES['image']['name'])) {
echo 'Successfully Uploaded!';
} else {
echo 'Error in file upload.';
}