Parsen einer CSV-Datei zur Verfügung gestellt, die durch eine Eingabe in Eckigen

Ich bin erstellen einer webapp, die Funktionen uploads .csv-Datei.

Statt das hochladen der ganzen Datei auf meinem server, dann hinzufügen alle Zeilen in einer Tabelle, Dank PHP, ich möchte Parsen der Datei in Eckigen, dann fügen Sie analysierten Linien (Dank Restangular). Auf diese Weise, ich sollte in der Lage sein, um etwas von "Fehler" vor dem hochladen (oder auch nicht).

In einer Ansicht, die ich angelegt habe eine einfache Datei-Eingabe, mit der eine Richtlinie genannt-Datei (Quelle : http://angularjstutorial.blogspot.fr/2012/12/angularjs-with-input-file-directive.html)

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

Den fileRichtlinie :

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

Diese Weise kann ich abrufen, wenn der Benutzer wählt eine Datei aus. Leider bin ich immer nur der Datei name.

Möchte ich zum Parsen der csv-Format in eine Zeichenfolge, die wir teilen Dank dieser filter (Quelle : Parsen von CSV in Javascript und 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;
  };
});

Wie kann ich das abrufen der Daten in der csv-Datei durch die Eingabe anstelle der Datei-name ?

Vielen Dank im Voraus.

InformationsquelleAutor aknorw | 2015-01-21
  1. 14

    Ok, ich fand die Lösung durch die Suche auf bestehende Module, die das hochladen von Dateien. Nur ich poste es hier, wenn das interessiert jemanden.

    In der Ansicht habe ich geändert die Richtlinie, um das Ereignis auszulösen :

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

    Die Richtlinie ist jetzt :

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

    In der Steuerung (vergessen Sie nicht, fügen Sie $filter im controller, wenn Sie es verwenden möchten) :

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

    Der filter ist immer noch der gleiche (es sei denn, ich habe verschoben, das Zeilen-array nicht importieren Sie die Kopfzeile meiner csv-Dateien).

    • Was ist FileReader hier? Kannst du das erklären?
    • FileReader ist ein HTML5-API ... Lesen von Dateien.
    • Hat mir geholfen, big time. Bitte schreiben Sie auch den richtigen csvToObj filter, die allen hilft
    InformationsquelleAutor aknorw
Schreibe einen Kommentar