File Upload Progress Bar Meter Tutorial HTML5 Ajax PHP


Video is ready, Click Here to View ×

Lesson Code:
In this programming lesson you can learn to use HTML5 + JavaScript + PHP to render an elegant file upload progress bar in your file upload forms. It is desirable to render a file upload progress bar when users upload files to your server, much like the way YouTube renders a file upload progress bar every time we upload a video to their network. The programming is not hard even for…

34 thoughts on “File Upload Progress Bar Meter Tutorial HTML5 Ajax PHP

  1. What can I do to modify this code to deal with multiple upload files? I still want to keep the use of the progress bar. I am hoping for moderate modifications to the tml file and underrstand that I have to modify considerably the php file. Thanks.

  2. When the loading has finished it redirects me to php file instead of writing complete… How did you prevent the redirect? You added event.preventDefault(); somewhere in the code that we couldnt see or something?

  3. The Html side for those who want a custom look

    <!Doctype html>



    <script type="text/javascript">

    function _(e){
    return document.getElementById(e);

    function uploadFile(){
    var file = _("file1").files[0];
    var formdata = new FormData();
    formdata.append("file1", 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);"POST","co.php");

    function progressHandler(event){
    var percent = (event.loaded / * 100;
    _("progressBar").style.width = ((Math.round(percent) / 100) * _("progress").offsetWidth)+"px";
    _("status").innerHTML = Math.round(percent)+"%";

    function completeHandler(event){
    _("status1").innerHTML =;
    _("progressBar").width = 0;
    function errorHandler(){
    _("status1").innerHTML = "Upload Failed";
    function abortHandler(){
    _("status1").innerHTML = "Upload Aborted";




    <form id="upload_form" enctype="multipart/form-data" method="post">

    <input type="file" name="file1" id="file1" />
    <input type="button" value="Upload File" onclick="uploadFile()">

    <div id="progress" style="display: flex; margin-top: 10px;background-color: transparent; height: 40px; width: 300px; border-radius: 5px; align-content: center; box-shadow: inset 0px 0px 10px rgba(19,19,19,0.8);">
    <p id="status" style="position: fixed; color: white; font-weight: bolder;width: 300px; height: 40px; text-align: center; margin-top: 10px;">0%</p>
    <div id="progressBar" style="background-color: #03A9F4; display: flex;
    align-content: center; height: 100%; width: 0px; border-radius: 5px;box-shadow: inset 0px 0px 10px rgba(19,19,19,0.8);"></div>

    <p id="status1"></p>




    The php side:

    $fileName = $_FILES["file1"]["name"];
    $tmp = $_FILES["file1"]["tmp_name"];
    $type = $_FILES["file1"]["type"];
    $size = $_FILES["file1"]["size"];
    $error = $_FILES["file1"]["error"];

    echo "Error: Please browse for a file to upload";

    if(move_uploaded_file($tmp, "uploads/{$fileName}")){
    echo "{$fileName} upload is complete";
    echo "move file upload failed";

  4. Hi!
    Very nice explanations.
    Can you help me. I have a proyect en Codeigniter. How can I adapt it to use it from the controller? The return with echo does not work because a use this type of returnÑ

    $this->load->view('administrador-root/import_file_view', $data);

    Tank you very much for you help!

  5. Thanks. You are wonderful. I first tried this code over a year ago and the progress bar didn't worked. I've just figured out why. Now it works. Why? – Since I already had code for file upload, I used your file_upload_parser.php file but with no content( i.e just <?php ?>).

  6. hey so i was trying to get this coding to work and i guess it cant find my php file ive copied and pasted the exact same code and tried to test it out and it wasnt working for me on google chrome

Leave a Reply

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