2017-08-16 89 views
0

我正在嘗試創建進度條,將文件上傳到帶有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> 
+0

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

+1

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

+0

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

回答

1

該代碼使得一些更有意義

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