正在解析 Angular 中输入提供的 CSV 文件

Question

我正在创建一个具有上传 .csv 文件功能的网络应用程序。

我不想将整个文件上传到我的服务器，然后在 table 中添加每一行，感谢 PHP，我想解析 Angular 中的文件，然后添加已解析的行（感谢 Restangular）。这样，我应该能够在上传（或不上传）之前检索到一些 "errors"。

在一个视图中，我创建了一个简单的文件输入，带有一个名为 file 的指令（来源：http://angularjstutorial.blogspot.fr/2012/12/angularjs-with-input-file-directive.html）

<input type="file" data-file="param.file" />

file指令：

app.directive('file', function(){
  return {
    scope: {
      file: '='
    },
    link: function(scope, el, attrs){
      el.bind('change', function(event){
        var files = event.target.files;
        var file = files[0];
        scope.file = file ? file.name : undefined;
        scope.$apply();
      });
    }
  };
});

这样，我可以在用户选择文件时进行检索。不幸的是，我只得到文件名。

我想解析字符串中的 csv，多亏了这个过滤器，我将拆分它（来源：parsing CSV in Javascript and AngularJS）：

app.filter('csvToObj',function(){
  return function(input){
    var rows=input.split('\n');
    var obj=[];
    angular.forEach(rows,function(val){
      var o=val.split(';');
      obj.push({
        designation:o[1],
        ...
        km:o[11]
      });
    });
    return obj;
  };
});

如何检索输入提供的 csv 文件中的数据而不是文件名？

提前致谢。

Answer 1

好的，我通过搜索现有模块上传文件找到了解决方案。如果有人对此感兴趣，我只是 post 在这里。

在视图中，我更改了触发事件的指令：

<input type="file" file-change="handler($event,files)" ng-model="MyFiles" />

指令现在是：

app.directive('fileChange',['$parse', function($parse){
  return{
    require:'ngModel',
    restrict:'A',
    link:function($scope,element,attrs,ngModel){
      var attrHandler=$parse(attrs['fileChange']);
      var handler=function(e){
        $scope.$apply(function(){
          attrHandler($scope,{$event:e,files:e.target.files});
        });
      };
      element[0].addEventListener('change',handler,false);
    }
  }
}]);

在controller中（如果要使用，不要忘记在controller中添加$filter）：

$scope.MyFiles=[];

$scope.handler=function(e,files){
    var reader=new FileReader();
    reader.onload=function(e){
        var string=reader.result;
        var obj=$filter('csvToObj')(string);
        //do what you want with obj !
    }
    reader.readAsText(files[0]);
}

过滤器仍然相同（除了我移动了行数组以不导入我的 csv 文件的 header）。

正在解析 Angular 中输入提供的 CSV 文件

Parsing a CSV file provided by an input in Angular

csv

input

angularjs