Show progressbar only when uploading a file with ajax

Question

My problem is, that the progressbar is always visible. I want to see it only, when the upload is in progress, or its complete.

Please comment, if you want to see the php file, that uploads the file to the server.

The upload is working, the problem is only with the progressbar.

My html form:

    <form method="post" id="form" enctype="multipart/form-data" action="files/import_vevo_xls.php">
              <table class="form">
                <tr>    
                    <td>
                        <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
                    </td>
                    <td>
                        <div id="fileName"></div>
                        <div id="fileSize"></div>
                        <div id="fileType"></div>
                    </td>
                </tr>
              </table>
              <table class="form">
                <tr>
                  <td class="last_td_no_border">
                    <button class="btn saveButton" name="submitButton" type="button" onclick="uploadFile()" id="importButton">Vevők importálása</button>
                  </td>
<div id="progress" style="display: block;width: 200px;padding: 1px 5px;margin: 1px 0;border: 1px inset #446;border-radius: 4px;">
<div id="progressNumber" style="height:5px;background: lime;"></div>
<div id="progressValue" style="text-align: center;"></div>

</div>
                </tr>
              </table>
            </form> 

And the javascript code:

var mbMaxFilesize = 5242880; // 5 MB

function fileSelected() {
    /* A fajl kiválasztása után, megnézzük a nevét, kiszámítjuk a méretét és kiírjuk a típusát */
    var file = document.getElementById('fileToUpload').files[0];
    if (file) {
        var fileSize = 0;
        if (file.size > 1024 * 1024)
            fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
        else
            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

        document.getElementById('fileName').innerHTML = 'Név: ' + file.name;
        document.getElementById('fileSize').innerHTML = 'Méret: ' + fileSize;
        document.getElementById('fileType').innerHTML = 'Típus: ' + file.type;
    }
    /* Megvizsgáljuk, hogy nem haladja-e meg a limitünket, az aktuálisan kiválasztott fájl mérete */
    if (file.size > mbMaxFilesize) {
        alert("A fájl mérete maximum 5 MB lehet.");
        xhr.addEventListener("abort", uploadCanceled, false);
        return false;
    }
}

function uploadFile() {
    /* Maga az XMLHttpRequest indítása. A fajl kivalasztasa esetén itt indítjuk meg a küldést, illetve az eventeket/figyelésüket
    majd meghívjuk az upload.php szerver oldali fájlunkat */
    var fd = new FormData();
    fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);
    xhr.open("POST", "files/import_vevo_xls.php");
    xhr.send(fd);
}

function uploadProgress(evt) {
    if (evt.lengthComputable) {
        var percentComplete = Math.round(evt.loaded * 100 / evt.total);
        document.getElementById('progressNumber').style.width = percentComplete + '%'; /*grafikus kijelzésnek*/
        document.getElementById('progressValue').innerHTML = percentComplete.toString() + '%'; /*érték kijelzésének*/
    } 
    else 
    {
        document.getElementById('progressNumber').innerHTML = 'nem kiszámithato.';
    }
}
function uploadComplete(evt) {
    document.getElementById('progressNumber').style.width = 100 + '%'; /*grafikus kijelzésnek*/
    document.getElementById('progressValue').innerHTML = '100' + '%'; /*érték kijelzésének*/
    alert(evt.target.responseText);

}
function uploadFailed(evt) {
    alert("Hiba, a feltöltés sikertelen.");
}
function uploadCanceled(evt) {
    alert("A feltöltést a böngészö megszakitotta.");
}

Answer 1

Three changes are necessary in order to make the progressbar visible during upload or when it is complete:

Change the div with id="progress":

<!--This makes the progressbar initially invisible.-->
<div id="progress" style="visibility:hidden;...>

Add following line to function uploadProgress:

<!--This makes progressbar visible during upload.-->
document.getElementById('progress').style.visibility = 'visible';

Add this tow function fileSelected:

<!--This hides progressbar if user selects another file.-->
document.getElementById('progress').style.visibility = 'hidden';