电脑文件传输进度显示

实现步骤如下(1) 添加布局和元素：

绿色的是一个层，层中加入的是“同步数据”元素。“选择文件”是在单行文本的基础上修改而成的。插入一个单行文本，”选择文件“下面添加的是从左侧”静态元素“中拖来的进度条。

(2) “同步数据”元素的设置在元素上右键选择“获取数据元素设置”，d出对话框，在元素上右键选择“逻辑”→数据绑定→绑定模式：属性绑定→绑定参{"data--sync":update,"data-x-pg":pg}。

(3) 进度条的设置找到进度条的内侧 div(进度条有两层div)，在内侧div上设置数据绑定，绑定参数：{"width":(pg() * 100).toFixed(2) +"%"}，绑定变量初始化：{"pg":0}。toFixed(n)表示保留n位小数。在样式类文件中添加如下样式类.progress-bar { -webkit-transition: width 0s -o-transition: width 0s transition: width 0s}。

(4) 设置进度值在上传进度的数值上加上span标签。

(5) 按钮设置

同步按钮的逻辑设置如下：

高级编辑填入的代码为:_vm.update("true")。取消按钮的设置与同步按钮的设置大致相同，不同的是高级编辑填入的代码为:_vm.update("")。

文件的大小读取和数据读取在线程中，使用信号和槽发送到主进程，更新到ui控件上。

先在线程当中发送文件的大小到主进程，通过setRange设置进度条控件的范围，再按行读取并将每次按行读到数据大小发到主进程，通过setValue叠加设置当前进度条的值。

后端的责任。

前端上传文件实时显示进度条和上传速度的工作原理就是后端的责任，在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。