javascript - 仅在使用 ajax 上传文件时显示进度条

Question

我的问题是，进度条总是可见的。我只想在上传正在进行或完成时看到它。

请评论，如果你想看到上传文件到服务器的 php 文件。

上传正常，问题仅在于进度条。

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

Answer 1

为了使进度条在上传期间或完成时可见，需要进行三项更改:

将 div 更改为 id="progress":

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

向函数 uploadProgress 添加以下行:

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

添加这个拖车功能fileSelected:

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