Easily Create File upload progress bar using only javascript

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.';
}