2017-02-18 2 views
0

Ich habe folgende Snippet, die Ordnung mit einzelnen Datei hochladen. Mein Ziel ist es, die vom Benutzer hochgeladene Datei von ngrepeat auf meinen Controller zu bekommen.Wie mehrere Dateien hochladen können in Einzelklick in Angularjs

Für jetzt möchte ich wissen, wie mehrere Datei-Upload mit einem einzigen Klick funktionieren kann.

Der folgende Code funktioniert gut für einzelne Datei, aber nicht für mehrere Dateien. Bitte helfen Sie mir, wo ich Fehler mache?

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>

Antwort

Verwandte Themen