上传文件并模拟进度条的实现（JQuery）

首先是布局示例：

<div class="correct-message uploading-doucuments-list clearfix">
        <div class="message-title pull-left">证据上传：
        </div>
        <label class="message-input-file pull-left" for="uploading-file">
          <i class="iconfont iconupload"></i>
          <span>选择文件</span>
          <input type="file" class="selected-btn" id="uploading-file" name="">
        </label>
        <!-- <div class="upload-mask"></div> -->
        <div class="uploading-done pull-left">
        </div>
 </div>

部分css样式（scss）：

  .message-title {
    width: calc(100% - 539px);
    height: auto;
    font-size: 14px;
    font-weight: bold;
    line-height: 46px;
    text-align: right;
   // color: $gray-dark;
  }
    .message-input-file {
    position: relative;
    width: 156px;
    margin-top: 4px;
    border-radius: 5px;
    text-align: center;
    border: 1px solid $brand;
    font-size: 16px;
    line-height: 34px;
    color: $brand;
    cursor: pointer;

    &.warn {
      border-color: $pink;
    }
}
  .selected-btn {
    position: absolute;
    opacity: 0;
    width: 155px;
    left: 0;
    display: none;
  }
    .document-headline {
    position: relative;
    padding-left: 10px;
  }

  .documnet-text {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
// 文件的icon
  .documnet-icon {
    width: 14px;
    height: 14px;
    margin-top: 12px;
    background-image: url(/src/assets/images/paperclip.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
    .progress-line {
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: 0%;
    height: 2px;
    background-color: #095F93;
  }

  .progress-line-back {
    position: absolute;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background-color: #f5f5f5;
  }
    .delete-icon {
    font-size: 20px;
    margin-left: 10px;
    //color: $gray-base;
    transform: rotate(45deg);
    cursor: pointer;
  }

uploading-done用来存放上传的文件列表，效果图如下：

上传功能的实现：

var upBtnIndex = 0;
 $('.selected-btn').change(function () {
      for (let i = 0; i < $(this)[0].files.length; i++) {
        files.push($(this)[0].files);
        sindex = $('.uploading-done').eq(upBtnIndex).find('.progress-line').length;
        progressBar(upBtnIndex, sindex, $(this)[0].files[i].name);
        $('.message-input-file').removeClass('warn');
      }
    });

模拟进度条的实现：

   // 模拟进度
    function progressBar(findex, sindex, name) {
      var max = 100;
      var init = 0;
      var uploaded;
      $('.uploading-done').eq(findex).show();
      $('.uploading-done').eq(findex).append('<div class="line-box clearfix"><div class="documnet-icon pull-left"></div><div class="document-headline pull-left"><div class="documnet-text pull-left">' + name + '</div><div class="delete-icon  pull-right">+</div><div class="progress-line-back"><div class="progress-line" style="width: ' + init + '%;"></div></div></div></div></div>')
      var test = setInterval(function () {
        init += 5;
        uploaded = init + '%';

        $('.uploading-done').eq(findex).find('.line-box').eq(sindex).find('.progress-line').css({ width: uploaded });
        if (init === 100) {
          clearInterval(test);
          let overTest = setTimeout('$(".uploading-done").find(".line-box").eq(' + (sindex - 1) + ').find(".progress-line").css({ width: "100%" })', 200)
          let overTestBack = setTimeout('$(".uploading-done ").find(".line-box").eq(' + (sindex) + ').find(".progress-line-back").hide()', 400)
        }
      }, 100);
    }

效果图如下：

上传多个：

上传之后删除文件的实现：

    $('.correct-message').on('click', '.delete-icon', function () {
      files.splice($(this).parent().parent().index(), 1);
      $(this).parent().parent().remove();
    });

上传文件的实现，主要用到了几种方法，
（1）append() 方法，是在被选元素的结尾（仍然在内部）插入指定内容
（2）splice() 方法，向/从数组中添加/删除项目，然后返回被删除的项目，可以删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
（3）定时器setTimeout，用来设定一个时间，时间到了，就执行method，
例子：setTimeout(",method()", 1000)
（4）eq选择器，通常是选取带有指定index值的元素
（5）setInterval()方法，是按照指定的周期去调用函数，直到clearInterval被调用，否则将一直调用函数
例子：调用时钟

<input type="text" id="clock" size="35" />
<button onclick="int=window.clearInterval(int)">Stop interval</button>
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
  {
  var t=new Date()
  document.getElementById("clock").value=t
  }
</script>