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

Question

我正在创建一个webapp,其中包含.csv文件的上传.

感谢PHP,而不是在我的服务器上上传整个文件,然后在表格中添加每一行,我想在Angular中解析文件,然后添加解析后的行(感谢Restangular).这样,我应该能够在上传(或不上传)之前检索一些"错误".

在视图中,我创建了一个简单的文件输入,带有一个名为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,由于这个过滤器我将分裂(源代码:在Javascript和AngularJS中解析CSV):

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

好的,我通过搜索现有模块来上传文件找到了解决方案.如果这是有兴趣的话,我只是在这里发布.

在视图中,我已经更改了指令以触发事件:

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

在控制器中(如果要使用它,请不要忘记在控制器中添加$ 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文件的标头).