仅在使用ajax上载文件时显示progressbar

我的问题是,progressbar总是可见的。我只想在上传过程中或上传完成时看到它。

如果您想查看将文件上载到服务器的php文件,请发表评论。

上传工作正常,问题只出现在progressbar上。

我的html表单:

    <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> 

以及javascript代码:

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.");
}