layUi多个文件上传进度条分别显示

最近公司要求我开发多文件上传并且要有进度条的展示,选用的是layUi ,多文件上传官方文档有用例,但是进度条就尴尬了,百度来百度去都只有单个文件上传的代码,于是乎只有靠自己了,搞了一个下午终于差不多了,现在就分享给大家吧…
我写的可能不是特别详细,大家可以结合着
这位博主:https://blog.csdn.net/weixin_42457316/article/details/81017471 写的一起看
html部分

<div class="layui-upload">
	  <button type="button" class="layui-btn layui-btn-normal" id="testList">添加</button> 
	  <div class="layui-upload-list">
	    <table class="layui-table">
	      <thead>
	        <tr><th>单位名称</th>
	        <th>文件名</th>
	        <th>上传进度</th>
	        <th>状态</th>
	        <th>操作</th>
	      </tr></thead>
	      <tbody id="demoList"></tbody>
	    </table>
	  </div>
	  <button type="button" class="layui-btn" id="testListAction">开始上传</button>
	</div> 
</div>	

js部分

//创建监听函数
     var xhrOnProgress=function(fun) {
        xhrOnProgress.onprogress = fun; //绑定