XMLHttpRequest对象读取上传文件数据显示进度条

XMLHttpRequest对象读取上传文件数据显示进度条

 

随着本人技术的不断提升，上传功能当然不能随便一选择就上传了，还是需要一些花里花俏的样式修饰修饰。

一开始我写的是所有文件一次性提交，但是因为异步提交数据的问题，会干扰到获取数据的顺序，导致数据错乱，所以我采用将数据一条一条的提交，这样获取的上传数据才不会乱

 

<fieldset class="layui-elem-field layui-field-title" style="margin-top:15px; border-color:#808080;">

            <legend>上传文件</legend>

    </fieldset>

     <a type="button" class="layui-btn layui-btn-normal upload" id="up_btn">

        <input class="change" type="file" multiple="multiple" id="files"  onchange="upinput()"/>

        <i class="fa fa-upload"></i>上传文件

     </a>

      <div class="upload_box" >

        <table class="layui-table" lay-skin="line">

        <colgroup>

         <col width="400">

         <col width="150">

         <col width="200">

         <col width="100">

        </colgroup>

          <thead>

            <tr>

            <th>文件名</th>

            <th>状态</th>

            <th>进度条</th>

            <th>操作</th>

          </tr>

          </thead>

          <tbody id="file_Infor">

          </tbody>

        <