Angularjs 解析输入文件提供的CSV文件

我正在创建一个webapp，它可以上传.csv文件

我不想在我的服务器上上传整个文件，然后通过PHP在表中添加每一行，我想用Angular解析文件，然后添加解析的行（通过Restangular）。这样，我应该能够在上传（或不上传）之前检索一些“错误”

在视图中，我创建了一个简单的文件输入，带有一个名为file（source:）的指令

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

我想解析字符串中的csv，由于这个过滤器，我将拆分它（来源：）：

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

---

提前感谢。

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

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

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

在控制器中（如果要使用，请不要忘记在控制器中添加$filter）：

---

过滤器仍然是一样的（除了我已将行数组移动到不导入csv文件的标题）。

这里的FileReader是什么？你能解释一下吗？帮了我大忙。还请编写正确的csvToObj过滤器，这对每个人都有帮助

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();
      });
    }
  };
});

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;
  };
});

<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);
    }
  }
}]);

$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]);
}