MVCでangularjを使用してExcelファイルをアップロードする。 HttpPostedFileBaseが空です

Question

角度jsを使用してmvcにExcelファイルをアップロードしようとしています。以下は、私の見解コードです：

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

続くのは私のコントローラのコードです：

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コントローラのコードです：

public ResponseModel Post(
      HttpPostedFileBase dataFile 
      ) 
     { } 

私が直面しています問題は、HttpPostedFileBaseです私は正しいパラメータを送信していますが、nullです。

私はExcelファイルのアップロードに取り組んでいます以外まさに私の問題で、次の質問を参考にしています。

HttpPostedFileBase is null when uploading files with Angular

任意の助けいただければ幸いです。

Answer 1

あなたは、ファイル

を投稿するには、次のコードを使用しますが、角度のjsとやりたいあなたCSHTMLビューでCAEで

@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... 
     } 
     } 

を次のコードを記述する必要があります

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