帖子FORMDATA沿采用了棱角分明的js文件与模型数据 [英] Post FormData file along with model data using angular js

问题描述

我使用的输入类型的文件与其他用户数据一起上传图像。我的模型由User类的：

I am uploading image using input type file along with other user data. My model consists of the User class:

public class User
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Rollno { get; set; }
    public byte[] ProfileImage { get; set; }
    public HttpPostedFile image { get; set; }
}

和asp.net mvc的一个贴法：

and a posted method in asp.net mvc:

public ActionResult AddUser(User user)
{
    var files = Request.Files;
    foreach (string fileName in Request.Files)
    {
        HttpPostedFileBase file = Request.Files[fileName];
        byte[] uploadFile = new byte[file.InputStream.Length];

    }
    return View();
}

我有一个输入的标签是这样的：

I have an input tag like this:

<input id="imgInp" type="file" aria-label="Add photos to your post" class="upload" name="file" onchange="angular.element(this).scope().LoadFileData(this.files)" multiple="" accept="image/*">

和一个angularJS控制器是这样的：

and an angularJS controller like this:

angular.module('app', ['AngularDemo.BeerController']).
  controller('formController',['$scope','$http', function ($scope,$http) {
    alert('in controller');
    var formData = new FormData();

    $scope.LoadFileData = function (files) {
        for (var file in files) {
            formData.append("file", files[file]);
        }
    };

    $scope.submit = function () {

        alert('in submit');
        $http.post("/Home/AddUser", formData, {
            withCredentials: true,
            headers: { 'Content-Type': undefined },
            transformRequest: angular.identity
        }).success(function (response) {

        });
    }
}]);

我的图像文件张贴回到 ADDUSER 方法，但我怎么送模型数据？我已经加入 NG-模式=姓名等形式。我该怎么办，因为我的 $ http.post 以表单数据传递发送 $ scope.Name 等与图像数据数据？

My image file is posting back in the AddUser method but how do I send the model data? I have added ng-model="Name" etc in the form. How do I send $scope.Name etc with that image data since my $http.post taking form data as passing data?

推荐答案

我得到这个固定的。返回缺少

I got this fixed. The return was missing

.controller（'的FormController'，['$范围，$ HTTP'，函数（$范围，$ HTTP）{
    $ scope.user = {
        ID：0，
        名称：
    };
    $ scope.files = [];

.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;*//NOTICE THIS RETURN WHICH WAS MISSING
        },
        data: { user: $scope.user, files: $scope.files }
    })
    .success(function(response) {   });
};

}）;

这篇关于帖子FORMDATA沿采用了棱角分明的js文件与模型数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！