前端上傳文件實時顯示進度條和上傳速度的工作原理是怎樣的？

01-15

相信很多人用過百度雲，上傳文件的時候會有動態顯示進度條和傳輸速度。
我知道可以利用Ajax定時刷新更新數據，這樣就可以實現前端。

但是我不懂後端應該如何工作。
這個文件提交之後是會建立一個文件流嗎？
這個文件流還是基於http協議的？
可能是由於http方面的知識不夠，某些功能我不清楚。

不過後端是如何知道進度的？我知道現有的某些框架已經提供了介面，但是它的原理卻不明白。
這個應該是web伺服器的責任？
還是(假如用Python)Python虛擬機的責任？
還是說http協議責任？

求dalao告知一下其工作原理，不懂原理寫代碼有時候很感覺出問題。。。

古往：

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

http://www.ruanyifeng.com/blog/2012/08/file_upload.html

今來：

https://www.zhuwenlong.com/blog/article/52d6769f93dcae3050000003

http://blog.kazaff.me/2014/11/14/聊聊大文件上傳/

nginx話lua可以拿到鏈接的套介面，讀取套介面就可以知道當前上傳了多少了。可以看下openresty的lualib/resty/upload.lua。

XMLhttprequest非同步請求

上傳下載都是有進度的。

就是後端的責任

在Django中實現需要重載上傳文件的函數

在上傳時文件是被分成數個MB的chunk處理的

每次都會調用這個上傳函數

也就是說每處理一個chunk就更新uploaded size

然後瀏覽器端通過AJAX獲取這個值和文件大小

最後用JavaScript渲染到頁面上

我用過大文件上傳插件，以我的理解大概是這樣的，由於上傳請求服務端有限制，一般才幾個MB，而且上傳不能中斷，斷了要重新來。

所以插件是這麼處理的，先在前端用js把文件分片，一般分到每片文件1-2MB左右，然後在進行上傳請求，在發送上傳請求之前會查詢服務端上傳了多少片，然後你又知道有多少片，算一下就知道了。

不過這種進度條有的時候也會不太準確

xhr對象的progress事件

我寫java的，前端只能說會用框架和插件幹活。前段時間用的百度的webuploader，demo就帶進度條的。js代碼不多可以看一下，猜測是監聽事件。

在我的淺顯的理解，上傳是前端和通信協議做的事，後端是寫入。

很多博客在比較傳統流和和spring自帶的transferto的耗時統稱上傳時間是不對的，應為寫入時間。