In this tutorial, we are going display a progress bar during the AJAX file upload process. On file change we are update to submit form data to the PHP page. also, we have file input field and progress bar to show the file upload progress. Initially, the progress bar width is set to 0 which will be gradually increased based on the progress completed.
Here is 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.';
}