進度條無法正常工作

我正在嘗試創建進度條，將文件上傳到帶有Javascript的AWS服務（lambda，S3）中，並且前端工作正在使用materializecss完成。但是，進度條移動得太快，在上傳之前它會達到最終結果，我可以看到使用innerHTML上傳文件的百分比。所以，我敢肯定，這是uploading.Below是我曾嘗試代碼：進度條無法正常工作

<style> 
#progressdisplay { 
      width: 100%; 
      background-color: #229954; 
      border-radius: 4px; 
      text-align: center; 
      line-height: 12px; 
      color: white; 
     } 

     #myBar { 
      height: 12px; 
      background-color: grey; 
      border-radius: 4px; 
     } 
    </style> 

<div class="row"> 
     <div class="file-field input-field col s12"> 
      <div class="btn blue"> 
       <span>Course File</span> 
       <input id="crsfile" type="file"> 
      </div> 
      <div class="file-path-wrapper"> 
       <input class="file-path validate" type="text" placeholder="Select the file"> 
      </div> 
     </div> 
    </div> 

    <br/> 
    <div class="container" id="progressbar"> 
     <div id="myBar"> 
      <div id="progressdisplay"></div> 
     </div> 
    </div> 

    <br/> 

    <div class="container center"> 
     <button class="btn waves-effect waves-light blue" type="submit" name="action" onclick="combinedfunctions()">Send 
     <i class="material-icons right">send</i> 
     </button> 
    </div> 

<script> 
request.on('httpUploadProgress', function(progress) { 
       var percentage = document.getElementById("progressdisplay"); 
       percentage.innerHTML = (progress.loaded * 100)/progress.total + "%"; 
       //console.log(progress.loaded + " of " + progress.total + " bytes"); 
       function move() { 

        var width = 10; 
        var id = setInterval(frame, 10); 

        function frame() { 
         if (width >= 100) { 
          clearInterval(id); 
         } else { 
          width++; 
          this.$$("progressdisplay").style.width = percentage + '%'; 
          this.$$("progressdisplay").innerHTML = percentage * 1 + '%'; 
         } 
        } 
       } 
      }); 
</script>

來源

2017-08-16 Soundharya AM

'這個$$（「progressdisplay」）。 style.width = percentage +'％';'....但是'percentage = document.getElementById（「progressdisplay」）;'...並且你的框架函數在1秒內計算寬度爲0 ... 100，不管任何實際的上傳進度（不是它使用任何東西的寬度） –

[這個小提琴]（https://jsfiddle.net/zn4yk0fj/）更有意義 - 不知道這個。$$是 –

是的。現在，我正在接受你。那麼，如何傳播以實現正確的結果呢？ –

該代碼使得一些更有意義

request.on('httpUploadProgress', function(progress) { 
    var element = document.getElementById("progressdisplay"); 
    var percentage = (progress.loaded * 100)/progress.total + "%"; 
    element.innerHTML = percentage; 
    progressdisplay.style.width = percentage; 
});

來源

2017-08-16 09:01:00

進度條無法正常工作

回答

相關問題