Fichier choisir avec Angular JS

Angulaire n'est pas encore en charge ng-changement pour input[type=file] de sorte que vous avez à rouler onchange de mise en œuvre vous-même.

Tout d'abord, dans le HTML, définir Javascript pour onchange comme suit:

<input ng-model="photo"
       onchange="angular.element(this).scope().file_changed(this)"
       type="file" accept="image/*" />

Et puis dans votre Angulaire contrôleur de code, définir la fonction:

$scope.file_changed = function(element) {

     $scope.$apply(function(scope) {
         var photofile = element.files[0];
         var reader = new FileReader();
         reader.onload = function(e) {
            //handle onload
         };
         reader.readAsDataURL(photofile);
     });
};

Teemu solution ne fonctionnera pas pour IE9.

J'ai mis en place un simple angulaire de la directive avec Flash polyfill pour les navigateurs ne supportant HTML5 FormData, vous pouvez également écouter de la progression du téléchargement de l'événement.

https://github.com/danialfarid/ng-file-upload
Démonstration: http://angular-file-upload.appspot.com/

<script src="angular.min.js"></script>
<script src="ng-file-upload.js"></script>

<div ng-controller="MyCtrl">
  <input type="text" ng-model="additionalData">
  <div ngf-select ng-model="files" >
</div>

contrôleur:

Upload.upload({
    url: 'my/upload/url',
    data: additionalData,
    file: files
  }).then(success, error, progress); 

À l'aide de Madura réponse à partir de ci-dessus, voici l'écoulement complet de la lecture d'un local fichier JSON:

Créer directive:

angular
  .module('app.services')
  .directive('fileChange', function() {
    return {
     restrict: 'A',
     scope: {
       handler: '&'
     },
     link: function (scope, element) {
      element.on('change', function (event) {
        scope.$apply(function(){
          scope.handler({files: event.target.files});
        });
      });
     }
    };
});

HTML:

<input type="file" file-change handler="fileSelect(files)">

Javascript:

$scope.fileSelect = function(files) {
  var file = files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
    console.log("on load", e.target.result);
  }
  reader.readAsText(file);
}

J'ai fait une directive. Voici la violon.

L'application fonctionne pour la cueillette de ces volumes et de leur montrer que des tables html.

Avec les changements dans les fichiers de la directive, vous serez en mesure de définir le fichier de la lecture et de l'analyse (avec les services, peut-être) dans la logique des contrôleurs de lui-même qui offrira plus de flexibilité. Juste pour la note, la ac.onFileChange fonction transmise sur les changements dans les fichiers de l'attribut deviendra le gestionnaire de changement d'entrée de l'événement à l'intérieur de la directive.

JS:

(function (angular, document) {
angular
.module("app.directives", [])
.directive("onFileChange", ["$parse", function ($parse) {
return {
restrict: "A",
link: function (scope, ele, attrs) {
//onFileChange is a reference to the same function which you would define 
//in the controller. So that you can keep your logic in the controller.
var onFileChange = $parse(attrs.onFileChange.split(/\(/)[0])(scope)
ele.on("change", onFileChange)
ele.removeAttr("on-file-change")
}
}
}])
angular
.module("app.services", [])
.service("Parse", ["$q", function ($q) {
var Parse = this
Parse.csvAsGrid = function (file) {
return $q(function (resolve, reject) {
try {
Papa.parse(file, {
complete: function (results) {
resolve(results.data)
}
})
} catch (e) {
reject(e)
}
})
}
}])
angular
.module("app", ["app.directives", "app.services"])
.controller("appCtrl", ["$scope", "Parse", function ($scope, Parse) {
var ac = this
ac.fileName = ""
ac.onFileChange = function (event) {
if (!event.target.files.length) {
return
}
Parse.csvAsGrid(event.target.files[0]).then(outputAsTable)
}
ac.clearInput = function (event) {
var input = angular.element(event.target)
input.val("")
document.getElementById("output").innerHTML = ""
}
function outputAsTable(grid) {
var table = ['<table border="1">']
grid.map(function (row) {
table.push('<tr>')
row.map(function (cell) {
table.push('<td>' + cell.replace(/["']/g, "") + '</td>')
})
table.push('</tr>')
})
table.push('</table>')
document.getElementById("output").innerHTML = table.join("\n")
}
}])
})(angular, document)

CSS:

table {
border-collapse: collapse;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js"></script>
<div ng-app="app" ng-controller="appCtrl as ac">
<label>Select a comma delimited CSV file:-</label>  
<input id="filePicker" type="file" on-file-change="ac.onFileChange(event)" ng-click="ac.clearInput($event)"/>{{ac.fileName}}  
</div>
<div id="output"></div>