使用AngularJS和Asp.Net MVC使用FormData上传多个文件

前端之家收集整理的这篇文章主要介绍了使用AngularJS和Asp.Net MVC使用FormData上传多个文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想使用角度js上传多个文件,为此我使用FormData().

这是我的表单字段

<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" />

这是我的Asp.Net MVC控制器

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

和角度控制器

.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) {   });
    };
});

问题是我想为个人资料上传一个以上的图像,而为头像上传另一个图像.当我上传时,只有第二个显示,它覆盖前一个.我试图推送$scope.files.push(文件),但它给了null.Need帮助我在那里缺少.

解决方法

更改LoadFileData函数

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

files返回Filelist对象,实际文件对象位于索引0.

猜你在找的Angularjs相关文章