概述
数据入导出功能是程序员开发中比较常见的功能,操作导入导出的人为业务人员,大批量数据的导入导出往往需要长时间的等待,为了让操作人员对导入导出进度直观可见,为导入导出功能添加进度条就是的该功能的使用体验有值得提升。
效果演示
开发流程
- 在“上传” 按钮下方编写静态进度条html代码,默认为隐藏状态
<div id="progress" style="height:20px;width:100%;background: #efefef;border:1px solid #eee;border-radius:10px;display:none;">
<div class="bar" style="background: green;width:10%;height: 100%;border-radius:10px;line-height:20px;">0%</div>
</div>
效果如下:
说明:具体使用时通过动态修改内部div的宽度即可实现进度条的变化。
- 在文件上传Form表单内添加taskId隐藏框,完整h