需要解释下我的结构， #upload-input-file 的input标签是真实的文件上传按钮，包裹form标签后可以实现上传功能， #upload-input-btn 的button标签是展示给用户的按钮，因为需要样式的美化。上传完成生成的文件名将会显示在 .upload-file-result 里面， .progress 是进度条的位置，先让他隐藏加上 hidden 的class， .progress-bar 是进度条的主体， .progress-bar-status 是进度条的文本提醒。
去掉hidden的class，看到的效果是这样的
[图片上传失败...(image-2c700a-1548557865446)]
将上传事件绑定在file的input里面，绑定方式就随意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'//上传步骤 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden")progress.width(percentVal)status.html(percentVal)}, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'progress.width(percentVal)status.html(percentVal)console.log(percentVal, position, total)}, success: function (result) { percentVal = '100%'progress.width(percentVal)status.html(percentVal)//获取上传文件信息 uploadFileResult.push(result)// console.log(uploadFileResult)$(".upload-file-result").html(result.name)$("#upload-input-file").val('')}, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown)$(".upload-file-result").empty()} })
[图片上传失败...(image-3d6ae0-1548557865446)]
[图片上传失败...(image-9f0adf-1548557865446)]
更多用法可以 参考官网
后端的责任。
前端上传文件实时显示进度条和上传速度的工作原理就是后端的责任，在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。
