Google trends Public Holidays Coupon Code Code Compiler

File upload progress bar using javascript


Apr 3, 2019

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

Copyright 2023. All rights are reserved