File upload progress bar using javascript

Apr 3, 2019 / JavaScript /

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

Comments

Mohammd ( Apr 4, 2019 09:23:53 )

I'm searching php software licence.. can you post license demo step..

Mohammd ( Apr 4, 2019 09:19:38 )

Thank you

Would you like to share your thoughts?

Your email address will not be published. Required field are marked*

Copyright 2018. All rights are reserved Significant Techno Web Design & Web Development By Significant Techno