javascript - 导入（.xls，.csv）文件并将文件内容粘贴到angularjs的文本区域中

Question

我必须导入 .xls 或 .csv 文件并将文件内容粘贴到 angularjs 的文本区域中。没有提交或可点击的按钮或其他操作。唯一的操作是导入文件，一旦导入文件内容就应该粘贴到文本区域。

处理文件和粘贴文件内容的功能是在 Java 中完成的（并通过 ajax 调用作为类似拖放功能的一部分，这工作正常）。

对于导入，我可以使用导入按钮打开和选择文件，但有些无法调用并将文件和控制发送到我的函数。我需要这方面的帮助。

我尝试过“ng-change”或（更改）等，但它不起作用。我应该怎么做才能让我的函数 importFile() 被正确选择的文件调用。任何帮助都会很棒。谢谢

导入文件控制器.js。

function importFile(event) {
  spinnerTrackerService.start('Analyzing your data...', 10);
    event.preventDefault();
    var files = event.dataTransfer.files;
   
    if(files[0].type === ('application/vnd.ms-excel')){         
           const promise = fetchFileService.fetchFileData(files[0]);
           promise.then((response) => {
               let responseTargetList = response.data.replace(/[[\]]/g,'');
               if(responseTargetList !== ""){
                   $ctrl.targetList = responseTargetList;
                   $ctrl.onTextAreaBlur();
                   spinnerTrackerService.stop();
               }else{
                   spinnerTrackerService.stop();
                   openWarningModal("EMPTY_FILE");
               }                   
           });
    } else {
        spinnerTrackerService.stop();
        openWarningModal("INVALID_FILE");
    }
};  

导入文件.html。

<div class="target-list-count-import-row">
        <div class="target-list-count-import-ctnr">
          <div class="target-list-import-ctnr">
            <input type="file" name="importFile" id="importFile" accept=".xls,.csv" class="hide-default" />
            <label for="importFile" class="target-list-import">
              <svg class="import-icon">
                <use href="#icon-import"></use>
              </svg>
              Import an existing list
            </label>
           </div>
         </div>
       </div>

标签： javascripthtmlangularjsajaxfile