如何計算傳輸文件上傳的字節數？

Question

大家好， 我想在JavaScript文件的總大小上傳.. 我想顯示進度條，顯示上傳大小與文件

的實際大小對於實例文件：-1800 B/3600 B ....沒有（完成50％）........ 3600 B/3600乙

如何計算1800乙即（文件上傳大小）

我只想通過使用JavaScript

Answer 1

這裏是文件上傳的代碼。請看的UpdateProgress（）函數

var formData = new FormData(), 
    updateProgress = function(evt) { 
     if (evt.lengthComputable) { 
      var percentComplete = (evt.loaded/evt.total) * 100; 
      console.log('Uploading your document...', percentComplete); 
     } else { 
      // Unable to compute progress information since the total size is unknown 
     } 
    }; 



    formData.append('file', file); 

    $.ajax({ 
     url: '/upload-file', 
     type: 'POST', 
     data: formData, 
     cache: false, 
     dataType: 'json', 
     context: this, 
     processData: false, // Don't process the files 
     contentType: false, // Set content type to false as jQuery will tell the server its a query string request 
     success: function(successResponse) { 
     console.log(successResponse); 
     }, 
     error: function(xhr) { 
      console.log('error', xhr); 
     }, 
     xhr: function() { // custom xhr 
      var myXhr = $.ajaxSettings.xhr(); 
      if (myXhr.upload) { // check if upload property exists 
       myXhr.upload.addEventListener('progress', updateProgress, false); 
      } 
      return myXhr; 
     }, 
     complete: function() { 

     } 
    }); 

或者，如果你不想使用jQuery：

const xhr = new XMLHttpRequest(); 
xhr.upload.addEventListener('progress', (evt) => { 
    let percentComplete = null; 
    if (evt.lengthComputable) { 
    percentComplete = Math.round(evt.loaded * 100/evt.total); 
    } 
    console.log('progress', percentComplete); 
}, false); 
xhr.addEventListener('load', (evt) => { 
    console.log('done'); 
}, false); 
xhr.addEventListener('error', (event) => { 
    console.log('error'); 
}, false); 
xhr.addEventListener('abort', (event) => { 
    console.log('abort'); 
}, false); 

xhr.open('POST', 'http://example.com/upload', true); 
xhr.send(formData); 

UPD： 如果evt.lengthComputable是假的，那麼你就需要設置內容 - 了XMLHttpRequest的長頭file.size

$.ajax({ 
      ... 
      beforeSend: function (request) 
      { 
       request.setRequestHeader("Content-Length", file.size); 
      }, 
      .... 
});