使用angularjs在MVC中上传Excel文件。 HttpPostedFileBase为空 [英] Uploading Excel File in MVC using angularjs. HttpPostedFileBase is empty

问题描述

我正在使用角度js在mvc中上传excel文件。以下是我的查看代码：

I am trying to upload an excel file in mvc using angular js. Following is my view code:

    <div class="browsebtn" ng-controller = "serviceablectrlr"><input type="file" id="dataFile" name="uploadFile" data-max-size="2097152" accept=".xls, .xlsx" onclick="$('#fileError').hide();" /> 
</div>
<input id="btnUploadExcel" type="button" value="Upload" ng-click="UploadConfirmation()" class="btn  btn-yellow" />

以下是我的控制器代码：

Following is my controller Code :

var app = angular.module('ProductCatalog');

app.controller('serviceablectrlr', function ($scope, $http) {

    var apiURL = $("#ProductCatalogApiUrl").val();
    var ClearFile = function () {
            $("#dataFile").val('');
        }


// pass file object and url to this method
$scope.UploadConfirmation = function () {
    alert("sana");
    var formData = new FormData();
    var totalFiles = document.getElementById("dataFile").files.length;
    for (var i = 0; i < totalFiles; i++) {
        var file = document.getElementById("dataFile").files[i];
        var ext = file.name.split(".")[1];
        if ((ext == "xls" || ext == "xlsx") && file.size < (Math.pow(1024, 3) * 2)) {
            formData.append("dataFile", file);

            $http({

                method: 'POST',
                url: apiURL + "/BulkInsertion",
                data: formData,
                dataType: 'json',
                headers: { 'Content-Type': undefined},
                transformRequest: angular.identity

            }).then(function successCallback(response) {
                if (response.data.ResponseData == 'Success') {
                    showToastrMessage('success', 'Offer saved successfully!');
                    $scope.data = {};
                }
                else {
                    alert('In error');
                    showToastrMessage('error', response.data.ResponseData);
                }
            },
            function errorCallback(response) {
            });

        }
        else {

        }
    }

}
});

以下是我的MVC控制器代码：

And following is my MVC Controller code:

   public ResponseModel Post(
            HttpPostedFileBase dataFile
            )
        { }

我所面临的问题是即使发送正确的参数，HttpPostedFileBase为null。

The problem i am facing is that the HttpPostedFileBase is null even though i am sending the correct parameters.

我已经提到了以下问题，这正是我正在使用excel文件上传的问题。

I have referred to the following question which is exactly my problem other than I am working on excel file uploading.

HttpPostedFileBase使用角度上传文件时为null

任何帮助将不胜感激。

推荐答案

您需要在cshtml视图中编写以下代码

You need to write following code in your cshtml view

@using (Html.BeginForm("ActioName", "ControllerName", FormMethod.Post, new { enctype = "multipart/form-data" }))
{         
       <div>
            <input type="file" name="file" />
            <input type="submit" value="OK" class="button" />
        </div>       
}

在MVC控制器中

[HttpPost]
      public ActionResult UploadFile(HttpPostedFileBase myFile)
      {
        //Validate the fileType

        // Verify that the user selected a file
        if (file != null && file.ContentLength > 0)
        {
        //do something here...
        }
      }

在cae你想要做的是角度js，然后使用下面的代码来发布文件

In cae you want to do with angular js then use following code to post file

// pass file object and url to this method
this.uploadFileToUrl = function (file,  uploadUrl) { 
    return $http({
        method: 'POST',
        url: uploadUrl,
        headers: { 'Content-Type': undefined },
        transformRequest: function() {
            var formData = new FormData();
            if(file){
               formData.append("myFile", file); 
            }
            return formData;
        }
    })
}

将此添加到 WebApiConfig.Register（）：

this.SupportedMediaTypes.Add(new MediaTypeHeaderValue("multipart/form-data"));

这篇关于使用angularjs在MVC中上传Excel文件。 HttpPostedFileBase为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！