手把手教你实现超大数据量带进度条导入导出功能（一导入篇）

概述

数据入导出功能是程序员开发中比较常见的功能，操作导入导出的人为业务人员，大批量数据的导入导出往往需要长时间的等待，为了让操作人员对导入导出进度直观可见，为导入导出功能添加进度条就是的该功能的使用体验有值得提升。

效果演示

开发流程

1. 在“上传” 按钮下方编写静态进度条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的宽度即可实现进度条的变化。

2. 在文件上传Form表单内添加taskId隐藏框,完整html代码如下：

<button style="width: 100px;" onclick="upload()" id="uploadBt