javascript - Angular将csv文件上传到范围内而不发布到服务器

Question

我试图允许用户上传 CSV 文件，以便可以显示和验证值。我不想将文件直接上传到服务器，我希望将其保留在范围内，直到经过验证。

Angular 1.5.8 无法将文件的输入类型绑定(bind)到模型 see here 所以我正在考虑使用 angular-file-upload但所有选项似乎都需要上传到服务器。我找不到可以帮助我将输入类型文件纳入范围的库。

所以我的问题是:如何将 csv 文件放入 Angular 范围？

Answer 1

您可以使用 FileReader 来读取用户选择的文件(!)

您的文件输入:

<input type="file" id="fileInput"/>

监听元素上的更改事件:

document.getElementById("fileInput").addEventListener("change", function(e) {
   var file = e.target.files[0];
   if(!file)
      return;

   var reader = new FileReader();
   reader.onload = function(e) {
      var contents = e.target.result;
      // add it to a $scope variable
      $scope.fileContent = contents;
      $scope.$apply();    // if you are outside of the AngularJS digest cycle
   };
   reader.readAsText(file);       
}, false);