解决不能连续上传/导入同一个文件

一、angularjs老版本：

html

<div id="inputfile">		
	<input type="file" id="file" name="file" style="display: none;" multiple required
					onchange="angular.element(this).scope().changeFile(this)"/>
</div>

js

$("#inputfile").empty();
$("#inputfile").append('<input type="file" id="file" name="file" style="display: none;" multiple required onchange="angular.element(this).scope().changeFile(this)"/>');
			

二、angular新版本：

1、方法一：ie浏览器不兼容

<div style="display: none" id="inputfile">
   <input type="text" class="form-control" id="importText"/>
   <input type="file" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" id="fileList">
</div>
//
if (this.PublicCom.getBrowserIsIE()) {
    $('#fileList').click();
    $('#fileList').change(function () {
      console.log('ieinputfile_change');
      that.importSure();
    });
}else{
   $("#inputfile").empty();
    $("#inputfile").append('<input type="text" class="form-control" id="importText"/>');
    $("#inputfile").append('<input type="file" accept="application/vnd.ms-excel,     application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" id="fileList"/>');
    const  watchid =setInterval(()=>{
        if($("#fileList").length){
          clearInterval(watchid);
          $("#fileList").click();
          $('#fileList').change(function () {
            that.importSure();
          });
        }
    },100);
}

方法二、弹出框式代码：

<div class="modal fade" tabindex="-1" role="dialog" id="myimportmodal" >
      <div class="modal-dialog" role="document" style="width: 850px;height: 288px">
        <div class="modal-content" >
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title ng-binding" id="modelname" style="font-weight: bold;">导入文件</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" >
              <div class="form-group">
                <label class="col-md-2 control-label" for="m_import">
                  <span class="required">* </span>导入：
                </label>
                <div class="col-md-9">
                  <div class="input-group">
                    <div  id="inputfile">
                      <input type="text" class="form-control" id="m_import_filename" readonly>
                      <input type="file" id="importfile" name="file" style="display: none;"  required  />
                    </div>
                    <span class="input-group-btn">
                        <button class="btn gray" type="button" style="margin-left:15px;" (click)="selectfile()">选择Excel文件</button>
                    </span>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <a href="#" class="btn btn-default" data-dismiss="modal">取 消</a>
            <button class="btn btn-primary" (click)="btnAction('m_importok')">确定导入</button>
          </div>
        </div>
      </div>
    </div>
//
selectfile():void {
    const that = this;
    if (this.PublicCom.getBrowserIsIE()) {
      that.isieinputfile();
    }else{
      that.disieresetinputfile();
    }
  }
isieinputfile():void {
    const that = this;
    $('#importfile').click();
    $('#importfile').change(function () {
      console.log('ieinputfile_change');
      const fileList = $('#importfile')[0].files;
      $('#m_import_filename').val(fileList[0].name);
      // that.importSure();
    });

  }
disieresetinputfile():void {
    const that = this;
    $("#inputfile").empty();
    // // 方法二：
    $("#inputfile").append('<input type="text" class="form-control" id="m_import_filename" readonly>');
    $("#inputfile").append('<input type="file" id="importfile" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" name="file" style="display: none;"  required  />');
    const  watchid =setInterval(()=>{
      if($("#importfile").length){
        clearInterval(watchid);
        $("#importfile").click();
        $('#importfile').change(function () {
          const fileList = $('#importfile')[0].files;
          $('#m_import_filename').val(fileList[0].name);
        });
      }
    },100);

  }

3、最终版

 <div class="input-group">
     <input type="text" class="form-control" id="m_import_filename" readonly >
     <div  id="inputfile0">
         <input type="file" id="importfile0" name="file" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"  style="display: none;"  required  />
     </div>
     <div  id="inputfile1" style="display: none;">
        <input type="file" id="importfile1" name="file" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"  style="display: none;"  required  />
                      
     </div>
     <span class="input-group-btn">
         <button class="btn gray" type="button" style="margin-left:15px;" (click)="selectfile()">选择Excel文件</button>
     </span>
</div>

1、弹出框显示：
        $('#m_import_filename').val('');
        if(that.filenum%2 === 0){
          $('#inputfile0').css('display', 'none');
          $('#inputfile1').css('display', '');
        }else{
          $('#inputfile0').css('display', '');
          $('#inputfile1').css('display', 'none');
        }
        // $('#importfile')[0] = [];
        $('#myimportmodal').modal({
          keyboard: true,
          backdrop: false
        });
2、选择文件：
  selectfile():void {
    const that = this;
    $('#importfile0').attr('type', 'text');
    $('#importfile0').attr('type', 'file');
    $('#importfile1').attr('type', 'text');
    $('#importfile1').attr('type', 'file');
    if(that.filenum%2 === 0){
      $("#importfile1").click();
    }else{
      $("#importfile0").click();
    }
    that.filenum = that.filenum + 1;
  }
3、change事件：
$('#importfile0').change(function () {
      that.xlsxFile = $('#importfile0')[0].files[0];
      $('#m_import_filename').val(that.xlsxFile.name);
      that.m_importokDis = false;//选择完文件，按钮可点击
      $('#importfile0').val(null);
    });
    $('#importfile1').change(function () {
      that.xlsxFile = $('#importfile1')[0].files[0];
      $('#m_import_filename').val(that.xlsxFile.name);
      that.m_importokDis = false;//选择完文件，按钮可点击
      $('#importfile1').val(null);
    });
4、确定导入：
  importSure():void {
    const that = this;
    const m_import_filename = $('#m_import_filename').val();
    if(!m_import_filename){
      alert('请选择上传文件！');
      return;
    }
    // const xlsxFile = $('#fileList')[0].files[0];
    const index = that.xlsxFile.name.lastIndexOf(".");
    if (index !== -1) {
      const ext = that.xlsxFile.name.substr(index+1).toLowerCase();
      if (ext !==  'xls' && ext !==  'xlsx') {
        alert('只能上传.xlsx、.xls文件');
        return;
      }
    } else {
      alert('只能上传.xlsx、.xls文件');
      return;
    }
    if (that.xlsxFile === null) {
      alert("请选择上传文件!");
      return;
    }
    console.log(Uint8Array.prototype.slice);
    if(!Uint8Array.prototype.slice){
      console.log(Uint8Array.prototype.slice);
      Uint8Array.prototype.slice = function(){
        return new Uint8Array(this).subarray(this.arguments);
      }
    };
    let wb; //读取Excel的数据
    const reader = new FileReader();
    reader.readAsArrayBuffer(that.xlsxFile);
    reader.onload = function (e) {
      const data = this.result;
      wb = XLSX.read(data, { type: 'array'});
      const oldExcelTab = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]],{raw:true, header:1});

      // oldExcelTab 可能包含空行，要把空行去掉
      const excelTab = [];
      for (let i=0;i<oldExcelTab.length;i++) {
        const excelOne = oldExcelTab[i];
        // @ts-ignore
        if (excelOne.length > 0) {
          excelTab.push(excelOne);
        }
      }
      let keysData = [];
      // @ts-ignore
      keysData = excelTab[5]; //表头数组
      //exportArr.push( ["IP地址","子网掩码","网关地址"]);
      if (keysData[2] === "IP地址" && keysData[3] === "子网掩码"
        && keysData[4] === "网关地址" ) {
        that.m_importokDis = true;//点击完确定后不可再进行点击
        that.sendImport(0,excelTab,"设置失败通道:");
      } else {
        alert("导入文件不符合要求!!!");
      }
    };
  }