如何以百分比顯示進度條？

如何以百分比顯示我在屏幕上上傳的進度？我想顯示從0％開始的欄和從percentComplete變量的輸出百分比。上傳完成後，我希望在進度欄中看到完成的消息。如果任何人都可以提供一些例子，我將不勝感激。謝謝。如何以百分比顯示進度條？

<div>Select file for upload: 
    <input type="file" id="fileUpload" name="fileUpload" onChange="fileUpload()"/> 
    <span id="showBar"></span> 
</div>

這裏是我的jQuery函數：

function fileUpload(){ 
    var reader = new FileReader(); 
    var file = fileExist.files[0]; 

    reader.onload = function(e) { 
     var text = reader.result.split(/\r\n|\n/); 
     var myForm = new FormData(document.getElementById('myForm'));      

     $.ajax({ 
      /*Start-Progress Bar Code*/ 
      xhr: function(){ 
       var xhr = new window.XMLHttpRequest(); 

       xhr.upload.addEventListener("progress", function(evt){ 
        if(evt.lengthComputable){ 
         var percentComplete = evt.loaded/evt.total; 
         percentComplete = parseInt(percentComplete * 100); 
         console.log(percentComplete); 

         if(percentComplete === 100){ 
          console.log("Successfully uploaded!"); 
         } 
        } 
       },false); 
       return xhr; 
       }, 
       /*End*/ 
       type: 'POST', 
       url: 'FileUpload.cfc?method=uploadFile', 
       data: new FormData($('#myForm')[0]), 
       cache: false, 
       contentType: false, 
       enctype: 'multipart/form-data', 
       processData: false, 
       dataType: 'json' 
      }).done(function(obj){ 
       if(obj.STATUS === 200){ 
        $('#myForm')[0].reset(); 
       }else{ 
        alert('Error!'); 
       } 
      }).fail(function(jqXHR, textStatus, errorThrown){ 
       alert(errorThrown); 
      }) 
    } 
    reader.readAsText(file, 'UTF-8'); 
}

來源

2016-11-17 espresso_coffee

爲什麼你讀取一個文件而不用它來做任何事情？ – Endless

你有沒有考慮plupload？這是他們的核心示例，具有簡單的文本比例：http://www.plupload.com/examples/core

來源

2016-11-18 01:27:09 Jules

我更喜歡上傳我的JavaScript/JQuery方法，代碼工作正常，我只需要顯示屏幕上進度的部分。就像百分比從0％開始一直到100％，然後隱藏一次完成。 –

如何以百分比顯示進度條？

回答

相關問題