移动端物流进度条前端开发怎么做

Posted 2023-05-11

新版XMLHttpRequest有一个progress事件监听函数，可以获知ajax的加载进度，具体参见阮一峰的博文 参考技术A 具体是怎么样的物流进度条呢？

前端上传文件实时显示进度条和上传速度的工作原理是怎样的？

参考技术A

后端的责任。

前端上传文件实时显示进度条和上传速度的工作原理就是后端的责任，在Django中实现需要重载上传文件的函数，在上传时文件是被分成数个MB的chunk处理的，每次都会调用这个上传函数。也就是说，每处理一个chunk就更新uploadedsize，然后浏览器端通过AJAX获取这个值和文件大小
最后用JavaScript渲染到页面上。

前端只能说会用框架和插件干活。前段时间用的百度的webuploader，demo就带进度条的。js代码不多可以看一下，猜测是监听事件。上传是前端和通信协议做的事，后端是写入。在比较传统流和和spring自带的transferto的耗时统称上传时间是不对的，应为写入时间。

项目框架采用spring+hibernate+springMVC如果上传文件不想使用flash那么你可以采用html5;截图前段模块是bootstarp框架;不废话直接来代码;spring-mvc配置文件。

nginx话lua可以拿到链接的套接口，读取套接口就可以知道当前上传了多少了。可以看下openresty的lualib/resty/upload.lua。