Angular JSからMVCへのマルチパートフォームとJSONデータの送信

Question

ファイルデータをMVCコントローラにアップロードするアップロードファイルコントロールがあります。私はまた、同じリクエストで追加のアップロード詳細モデルオブジェクトを送信したいと思います。

しかし、ファイルのアップロードには、コンテンツタイプが定義されています。は私のために働きます。しかし、MVCコントローラがモデルデータを効果的に受け取るには、application/jsonでなければなりません。 1回のリクエストでどのようにすればいいですか？

または、私が従うことができる他の方法はありますか？提案してください。アップロードが完了するためには、両方のデータをサーバーに送信する必要があります。私がやっている

は今、私はそののparamsを送りたい

var formdata; 
$scope.getTheFiles = function ($files) { 
    formdata = new FormData(); 
    angular.forEach($files, function (value, key) { 
     formdata.append(key, value); 
    }); 

と

$scope.validateFiles = function() { 

    var params = UploadDataServices.getGroupMembershipUploadParams(); 

    $scope.pleaseWait = { "display": "block" }; 

    var request = { 
     method: 'POST', 
     url: BasePath + 'uploadNative/ValidateFiles/', 
     data: formdata, 
     headers: { 
      'Content-Type': undefined 
     } 
    }; 

    // SEND THE FILES. 
    console.log(formdata); 

    if (formdata != null || formdata != undefined) { 
     $http(request) 

そして、私は

System.Web.HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files; 

としてファイルデータを取得するMVCコントローラで

ある私が受け取ったリクエストでも

var params = UploadDataServices.getGroupMembershipUploadParams(); 

どうすればよいですか？私はやってみた

var request = { 
     method: 'POST', 
     url: BasePath + 'uploadNative/ValidateFiles/', 
     data: {formdata:formdata,arg:params}, 
     headers: { 
      'Content-Type': undefined 
     } 
    }; 

しかし、私はファイルデータにアクセスできませんでした。

方法を提案してください。

ありがとうございます。

Answer 1

この方法で、いくつかのプロパティと共に複数のファイルをアップロードすることができます。

フォームデータを使用して複数のファイル/レコードを送信するには、そのキーにインデックスを付ける必要があります。 [0].someKeyつまりformdata.append('[' + i + '].' + key, value);ですが、レコードを1つだけ送信する場合は、インデックスを削除して、そのキーを直接追加機能に渡すことができます。

ユーザーが「ファイルを追加」ボタンをクリックすると、新しい行がテーブルに追加されます。ユーザーはファイルコントロールをクリックしてファイルを選択でき、指示はファイルオブジェクトをコントローラーの有効範囲に設定します。 "保存"ボタンをクリックすると、すべてのファイルとそのプロパティをループしてFormDataオブジェクトに追加し、FormDataオブジェクトとともに設定オブジェクトを使用してコントローラにポストします。

モデルです。

public class FileModel 
{ 
    public int Id { get; set; } 

    public string Name { get; set; } 

    public HttpPostedFileBase Attachment { get; set; } // The HttpPostedFileBase provides access to files uploaded by the client. 
} 

MVCコントローラ

[HttpPost] 
public JsonResult SaveFiles(List<FileModel> files) 
{ 
    // Your logic here. 
} 

ビューのアクションメソッド。

<form role="form" ng-submit="saveFiles()"> 
    <div class="form-group"> 
     <table class="table table-bordered table-striped table-responsive"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>File</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-hide="files.length"> 
        <td colspan="2">No records to display.</td> 
       </tr> 

       <tr ng-repeat="file in files"> 
        <td> 
         <input type="text" class="form-control" ng-model="file.Name" /> 
        </td> 
        <td> 
         <input type="file" class="form-control" file-model="file.Attachment" /> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 

    <div class="col-xs-12"> 
     <div class="col-xs-6"> 
      <button type="button" class="btn btn-info btn-sm" ng-click="addFile()">Add File</button> 
     </div> 
     <div class="col-xs-6"> 
      <button type="submit" class="btn btn-info btn-sm">Save</button> 
      <button type="button" class="btn btn-info btn-sm" ng-click="cancelSaveFiles()">Cancel</button> 
     </div> 
    </div> 
</form> 

AngularJSコントローラ。

var app = angular.module('example', []); 

app.controller('FilesController', function ($scope) { 
    $scope.files = []; 
    $scope.saveFiles = saveFiles; // saveFiles func given below. 
}); 

<input type="file" />のAngularJSディレクティブ。

app.directive('fileModel', function ($parse) { 
     return { 
      restrict: 'A', 
      link: function (scope, element, attrs) { 
       var model = $parse(attrs.fileModel); 
       var modelSetter = model.assign; 

       element.bind('change', function() { 
        scope.$apply(function() { 
         modelSetter(scope, element[0].files[0]); // sets the file object on the model property. 
        }); 
       }); 

       scope.$watch(model, function (newValue, oldValue) { 
       if (newValue === null || newValue === undefined || newValue === '') { 
        angular.element(element).val(''); // clears the file from the input element if the model is cleared. 
       } 
      }); 
     } 
    }; 
});   

AJAX呼び出し。

function saveFiles() { 
      if (angular.isArray($scope.files) && $scope.files.length > 0) { 
       var formdata = new FormData(); 

       for (var i = 0; i < $scope.files.length; i++) { 
        for (var key in $scope.files[i]) { 
         var value = $scope.files[i][key];  
         formdata.append('[' + i + '].' + key, value); 
        } 
       } 

       var config = { 
        transformRequest: angular.identity, 
        headers: { 'Content-Type': undefined }       
       }; 

       $http.post('/Area/Controller/SaveFiles', formdata, config) 
        .success(saveFilesCompleted); 

       function saveFilesCompleted(data) { 
        // call back 
       } 
      } 
     }