上传文件并发送数据AngularJS + WebAPI

时间:2015-06-11 17:26:42

标签: angularjs file-upload asp.net-web-api

我需要使用AngularJS执行文件上传并将表单数据发送到WebApi Controller(也适用于IE8)。

我的表单定义为

<form name="sendForm" ng-submit="submitForm()">
        <input type="text" name="fname" placeholder="First name" ng-model="form.firstname">
        <br>
        <input type="text" name="lname" placeholder="Last name" ng-model="form.lastname">
        <br>
        <input type="text" name="email" placeholder="Email" ng-model="form.email">
        <br>
        <input type="file" ng-model="form.file_idea" id="file_profile"><br />
        <br>
        <input type="submit" value="Submit">
    </form>

我的Angular控制器方法是:

$scope.submitForm = function ()
{
    formData = $scope.form;

    var formObjectForWebApi =
        {
            Username: $scope.form.firstname,
            Lastname: $scope.form.lastname,
            Email: $scope.form.email,
        };

    $masterContext.SendForm(formObjectForWebApi).then(function (res)
    {
    });
}

我的主语境被定义为

var MasterContext = angular.module(“MasterContext”,[]); MasterContext.service(“MasterContextService”,[“$ resource”,

function ($resource)
{
    var service = {};

    service.SendForm= function (form)
    {
        var webapiresource = $resource('/api/formcontroller/sendform');

        return webapiresource.save(form).$promise.
                then(function (res)
                {
                    return res;
                },
                function error(res)
                {
                    return res;
                });
    };

    return service;
}]);

我的网络Api接收数据

[Route("api/formcontroller/sendform")]
[HttpPost]
public IHttpActionResult SendForm(MyForm form)
{
   .
   .
   .
   .
   .

如果我检查当前请求,我将无法找到用户想要上传的文件。我怎样才能解决我的情况呢?

1 个答案:

答案 0 :(得分:0)

编写以下代码以获取方法中的文件。

System.Web.HttpFileCollection httpRequest = System.Web.HttpContext.Current.Request.Files;
for (int i= 0; i <= httpRequest.Count - 1; i++) {
    System.Web.HttpPostedFile postedfile= httpRequest[i];<br/>
    if (postedfile.ContentLength > 0) {
        'logic'
    }
}