多个input 上传文件

需求

需要使用多个input来实现上传文件，并且可以删除

html部分

<!--上传附件-->
<div class="update-box">
    <!--用于存放上传的图片队列-->
    <ul class="update-list clearfix" id="update-content">
        <li class="file_con file_list1"></li>
        <li class="file_con file_list2"></li>
        <li class="file_con file_list3"></li>
    </ul>

    <div class="update-btn clearfix margin-t-10">
        <p class="left">最多可上传3个附件允许png、jpg、jpeg、gif、doc、docx格式每个文件大小不超过3MB</p>
        <div class="right update-files">
            <span class="add-accessory"><i></i>添加附件</span>
            <ul class="clearfix">
                <li class="li1">
                    <input id="file1" type="file" name="images" />
                </li>
                <li class="li2">
                    <input id="file2" type="file" name="images" />
                </li>
                <li class="li3">
                    <input id="file3" type="file" name="images" />
                </li>
            </ul>
        </div>
    </div>

</div>

css部分

/*上传*/
.update-box{
    width: 100%;
    height: auto;
    margin-top: 20px;
}
.update-box .update-btn p{
    text-align: left!important;
    width: 58%;
    color: #9b9b9b;
    font-size: 12px;
    margin-top: 10px;
}
.update-box .update-btn .update-files{
    width: 116px;
    height: 36px;
    background-color: #1574ff;
    text-align: center;
    position: relative;
    border-radius: 2px;
    margin-right: 1%;
    cursor: pointer;
    margin-top: 11px;
}
.update-box .update-btn .update-files span{
    position: absolute;
    top: 2px;
    left: 0;
    display: inline-block;
    width: 116px;
    height: 36px;
    line-height: 36px;
    color: #fff;
}
.update-box .update-btn .update-files span i{
    display: inline-block;
    width: 14px;
    height: 13px;
    margin-right: 6px;
    background: url("../../images/plus-sign-on.png");
}
.update-box .update-files ul{
    height: 36px;
    overflow: hidden;
   /* position: absolute;
    top: 0;
    left: 0;*/
}
.update-box .update-files ul li input{
    opacity: 0;
    height: 36px;
    /*height: 36px;
    font-size: 25px;
    display: block;*/
}
/*图片对列*/
/*.update-box .update-list{
    display: none;
}*/
.update-box .update-list li.file_con{
    float: left;
    position: relative;
    width: 30%;
    background-color: #fff;
    font-size: 12px;
    overflow: hidden;
    padding: 0 10px;
    margin-right: 10px;
    box-shadow: 0 2px 6px 0 #f4f6f7;
    border-radius: 2px;
}
.update-box .update-list li.file_con .file-img{
    height: 77px;
    line-height: 77px;
    text-align: center;
}
.update-box .update-list li.file_con .file-img img{
    max-width: 100%;
    vertical-align: middle;
}
.update-box .update-list li p{
    font-size: 12px;
    padding: 5px 20px;
}
.update-box i.remove-icon{
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 3px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
.update-box  .remove-icon{
    background: url("../../images/workOrder/del-icon.png");
}
.update-box .update-list li.file_con:hover{
    box-shadow: 0 5px 16px 0 #d5e4f8;
}

js部分

  filer("file1",".file_list1","#file1");
  filer("file2",".file_list2","#file2");
  filer("file3",".file_list3","#file3");
  //上传图片
  function filer(imgId,textEle,clearFiler){
      var str = "";
      $("#"+imgId).on("change",function () {
          $(".update-list").show();
          var obj = document.getElementById(imgId);
          var length = obj.files.length;

          if(length !== 0){
              str = "";

              for (var i=0; i<length; i++){
                  $(textEle).html("");
                  //上传文件的name值
                  var temp = obj.files[i].name;

                  str = '<div><div class="file-img">' +
                      '<img src="images/workOrder/file-icon.png" alt="">' +
                      '</div><p>'+temp+'</p></div>';
                  var p = $("<i></i>");
                  p.addClass("remove-icon");
              }
              $(textEle).append(str);
              $(textEle).children('div').append(p);
          }

      });
      //点击叉号可以删除要上传的文件
      $(textEle).on("click", ".remove-icon", function () {
          $(clearFiler).val("");
          $(this).closest('div').remove();
          var orderChange = $(textEle);

          if(orderChange.hasClass("file_list1")){
              $("#file1").show();
          }
          if(orderChange.hasClass("file_list2")){
              $("#file2").show();
          }
          if(orderChange.hasClass("file_list3")){
              $("#file3").show();
          }


      });

      $("#file1").change(function () {
          $("#file1").hide();
      });
      $("#file2").change(function () {
          $("#file2").hide();
      });
      $("#file3").change(function () {
          $("#file3").hide();
      });
  }

效果如下：