2017-02-18 9 views
0

J'ai un extrait suivant qui ne pose problème qu'avec le téléchargement d'un seul fichier. Mon but est de faire en sorte que l'utilisateur télécharge le fichier de ngrepeat vers mon contrôleur.Comment le téléchargement de plusieurs fichiers peut-il fonctionner en un seul clic dans Angularjs

Pour l'instant, je veux savoir comment le téléchargement de plusieurs fichiers peut fonctionner en un seul clic.

Le code suivant fonctionne correctement pour un fichier unique mais pas pour un fichier multiple. S'il vous plaît aidez-moi où je fais des erreurs?

var myApp = angular.module('myApp', []); 
 

 
myApp.directive('fileModel', ['$parse', function ($parse) { 
 
    return { 
 
     restrict: 'A', 
 
     link: function(scope, element, attrs) { 
 
      var model = $parse(attrs.fileModel); 
 
      var modelSetter = model.assign; 
 
      
 
      element.bind('change', function(){ 
 
       scope.$apply(function(){ 
 
        modelSetter(scope, element[0].files[0]); 
 
       }); 
 
      }); 
 
     } 
 
    }; 
 
}]); 
 

 
myApp.service('fileUpload', ['$http', function ($http) { 
 
    this.uploadFileToUrl = function(file, uploadUrl){ 
 
     var fd = new FormData(); 
 
     fd.append('file', file); 
 
     $http.post(uploadUrl, fd, { 
 
      transformRequest: angular.identity, 
 
      headers: {'Content-Type': undefined} 
 
     }) 
 
     .success(function(){ 
 
     }) 
 
     .error(function(){ 
 
     }); 
 
    } 
 
}]); 
 

 
myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){ 
 
    
 
    $scope.uploadFile = function(){ 
 
     var file = $scope.myFile; 
 
     console.log('file is '); 
 
     console.dir(file); 
 
     $scope.d.file = file; 
 
     console.log($scope.d) 
 
     var uploadUrl = "/fileUpload"; 
 
     fileUpload.uploadFileToUrl(file, uploadUrl); 
 
    }; 
 
    
 
}]);
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 
<div ng-controller = "myCtrl"> 
 
    <input type="file" file-model="myFile"/> 
 

 
    <input type="text" ng-model="d.name"> 
 
    <button ng-click="uploadFile()">upload me</button> 
 
</div> 
 
</body> 
 
</html>

Répondre