Laden Sie mehrere Dateien mit FormData mit AngularJS und Asp.Net MVC

Question

Ich möchte mehrere Dateien mit eckigen js hochladen, dafür verwende ich FormData().

Hier ist meine Formularfelder

<input name="profileImage" type="file" class="upload" 
    onchange="angular.element(this).scope().LoadFileData(this.files)" accept="image/*"> 

<input name="avatarImage" type="file" class="upload" 
    onchange="angular.element(this).scope().LoadFileData(this.files)" accept="image/*"> 

    <input name="Id" type="text" ng-model="user.Id" /> 
<input name="Name" type="text" ng-model="user.Name" /> 

Hier meine Asp.Net MVC-Controller

public ActionResult AddUser(string user, HttpPostedFileBase[] files) 
{ 
    // parse user into User 
} 

und der Winkelregler

.controller('formController',['$scope','$http', function ($scope, $http) { 
    $scope.user = { 
     Id: 0, 
     Name: "" 
    }; 
    $scope.files = []; 

    $scope.LoadFileData = function(files) { 
     $scope.files = files; 
    }; 

    $scope.submit = function() { 
     $http({ 
      url: "/Home/AddUser", 
      method: "POST", 
      headers: { "Content-Type": undefined }, 
      transformRequest: function(data) { 
       var formData = new FormData(); 
       formData.append("user", angular.toJson(data.user)); 
       for (var i = 0; i < data.files.length; i++) { 
        formData.append("files[" + i + "]", data.files[i]); 
       } 
       return formData; 

      }, 
      data: { user: $scope.user, files: $scope.files } 
     }) 
     .success(function(response) { }); 
    }; 
}); 

ist

Problem ist, dass ich mehr als ein Bild für Profil und das andere für Avatar hochladen möchte. Wenn ich beides lade, erscheint nur der zweite, der den vorherigen überschreibt. Ich habe versucht, $ scope.files.push (Dateien) zu schieben, aber es gibt null.Need Hilfe, was ich dort vermisse.

Answer 1

Ändern der LoadFileData Funktion

$scope.LoadFileData = function (files) { 
     $scope.files.push(files[0]); 
    }; 

files gibt eine Liste der Dateien Objekt und den tatsächlichen Dateiobjekt ist bei Index 0.

Answer 2

$scope.LoadFileData = function (element) { 
     var filesX = element.files; 
     for(var i=0;i<filesX.length;i++) 
     { 
      $scope.files.push(filesX[i]); 
     } 
    }