如何正確制作HTML進度欄

Question

我正在嘗試為我的應用程序中上傳的進度創建進度欄。 到目前為止，我有這個

<div class="col-sm-12">
    <span style="border-left:5px solid #555555; padding-left:.5em">Upload File</span>
    <div style="margin-top:1em; margin-left:.8em;">                               
        <input type="file" name="file" class="inputfile" id="group-agent-file" accept=".csv"/>
        <label for="file" id="span-file-upload" class="btn btn-danger">
            <span class="fa fa-upload" style="margin-right:.5em"></span>                                    
            <span id="span-file-name">Choose a file</span>
       </label>
   <div>
   <button type="button" id="btn-group-agent-upload" class="btn btn-primary" title="Upload">Upload</button>
</div>
<div class="progress">
     <div class="progress-bar progress-bar-green" role="progressbar" id="progress-bar-upload">
          <span></span>
     </div>                                
</div>    

這是我的javascript

var result = event.target.result;
var data = $.csv.toObjects(result);
var length = data.length;
var count = 0;
var percent;

$.each(data, function (key, val) {

    $.ajax({
        xhr: function(){
            var xhr = $.ajaxSettings.xhr();
            xhr.upload.onprogress = function (evt) {
                console.log('progress', evt.loaded / evt.total * 100);
            };
        },
        type: "POST",
        url: "IROA_StoredProcedures.asmx/Insert_Bulk_Agent",
        data: JSON.stringify(val),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function () {
            count = count + 1;
            percent = count / length * 100;

            $("#progress-bar-upload").css("width", percent + "%");
            $("#progress-bar-upload span").text(percent + "% Complete");
            console.log("Finished " + count + " of " + length + " employees.");
        },
        error: function (XMLHttpRequest) {
            alert("error in Insert_Bulk_AgentInfo()");
            console.log(XMLHttpRequest);
        }

    });

});

它工作正常，但我認為HTML無法處理足夠的width ，有時會延遲width百分比。 我怎樣才能做到這一點？ 當我使用setInterval時可能會有什么弊端

Answer 1

要在jQuery中獲得上傳進度，您需要將Event-Listener附加到progress事件。

您可以在jQuery中執行類似的操作

$.ajax({
xhr: function() {
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var percentComplete = (evt.loaded / evt.total);
            //Update the progress bar
        }
   });

   return xhr;
},
type: 'POST',
url: "/upload/path",
data: { YOUR UPLOAD DATA },
success: function (data) {
}
});

這對於普通js來說是一樣的

var xhr = new XMLHttpRequest();
xhr.open('POST', "/upload/path", true);
xhr.upload.addEventListener('progress', function (event) {
  if (evt.lengthComputable) {
    var percentComplete = (evt.loaded / evt.total);
    //Update the progress bar
  }
}
xhr.onload = function (response) {
  // handle success/error here
}
xhr.setRequestHeader(SET_HEADERS);
xhr.send(UPLOAD_DATA);

Answer 2

當您的ajax調用完成時，將調用成功函數。 您應該使用xhr函數而不是成功。

xhr: function(){
                var xhr = $.ajaxSettings.xhr() ;
                xhr.upload.onprogress = function(evt){ 
                    console.log('progress', evt.loaded/evt.total*100); 
                    var percentageCompleted = evt.loaded/evt.total*100;
                    updateUploadPercentage(parseInt(percentageCompleted));
                    if(percentageCompleted == 100){
                        $("#p_custom_message_body").html('<p>Storing training data</p><img src="media/images/loading.gif">');
                    }
                } ;
                return xhr ;
            }

之后，在另一個功能中更新進度欄：

    function updateUploadPercentage(progress) {
    var elem = document.getElementById("progressBar");
    elem.style.width = progress + '%'; 
    elem.innerHTML = progress * 1 + '%';
}