$ .ajaxとasp.netを使用してFileReaderオブジェクトを投稿する方法MVC

Question

一時的なイメージを最初に追加してから、サブミットしたらそれらのイメージをすべてサーバーに追加します。

はここにここに私のスクリプト

<script> 
    var arrAcademicDetail = new Array(); 
    function AcademicDetailModel() { 
     this.Id = 0; 
     this.UserId = 0; 
     this.CollegeId = 0;   
     this.DegreeFile=new FileReader(); 
    } 
</script> 

ここアレイへの一時画像を追加し、私のクリックイベントがある私のクラス

public class UserModel 
{ 
    public int Id { get; set; } 
    public string FirstName { get; set; } 
    public List<AcademicDetailModel> AcademicDetails { get; set; } 
} 

public class AcademicDetailModel 
{ 
    public int Id { get; set; } 
    public int UserId { get; set; } 
    public int CollegeId { get; set; } 
    public HttpPostedFileBase DegreeFile { get; set; } 
    public String DegreeFilePath { get; set; } 
} 

です。

$(document).ready(function() { 
     $('#btnAcademic').click(function() { 

      var _AcademicDetailModel = new AcademicDetailModel(); 
      _AcademicDetailModel.Id=(arrAcademicDetail.length)+1; 
      _AcademicDetailModel.CollegeId = $('#CollegeId').val();     

      if (window.File && window.FileReader && window.FileList && window.Blob) { 
       var file = document.getElementById("DegreeFilePath").files[0]; 
       _AcademicDetailModel.DegreeFile=file; 
       } 


      arrAcademicDetail.push(_AcademicDetailModel); 


     }) 
}) 

ここでは、データをサーバーに送信する最終送信イベントがあります。

$.ajax({ 
      url: '@Url.Action("AcademicDetail", "Home")', 
      data: { "Model": { 
       "Id":UserId, 
       "AcademicDetails": arrAcademicDetail 
      }}, 
      contentType: false, 
      processData: false, 
      type: 'POST', 
      beforeSend: function() { 
       DDU.blockUI({ message: "Please wait.." }); 
      }, 
      success: function (result) { 
       var obj = $.parseJSON(result); 
       //Other Process 
      }, 
      complete: function() { 
       DDU.unblockUI(); 

      }, 
      error: function() { 
       DDU.unblockUI(); 
       bootbox.alert("Oops ! you caught an error.<br/><br/><b>Possible Reason</b> <br/>- Invalid data");  
      } 
     }); 

は、ここに私の行動

public ActionResult AcademicDetail(UserModel Model) 
{ 
    try 
    { 
    } 
    catch() 
    { 
    } 
} 

であるが、このアクションでは、私はヌルModel.AcademicDetailsを取得します。

Answer 1

apiオブジェクトをFormDataで飾って、画像/ファイルを含むフォームデータをajaxでサーバーに投稿できるようにする必要があります。

簡単な例：

var saveUserRequest = function (userModel, callback) { 
     var userModel = new FormData(); 
     model.append('image', userModel.image); // this has the file for sure (document.getElementById("DegreeFilePath").files[0]) 

     model.append('userId', userModel.Id); 
     model.append('userName', userModel.Name); 

     $.ajax({ 
      url: '/api/UserApi/SaveUser', 
      type: 'POST', 
      dataType: 'json', 
      data: model, 
      processData: false, 
      contentType: false, 
      complete: function (data) { 
       callback && callback(data); 
      }, 
      error: function (response) { 
      } 
     }); 
    }; 

注：お使いのHTMLフォームがENCTYPE = "multipart/form-data" を持っている必要があり

コントローラに比べて、あなたは、このような方法で渡されたデータにアクセスすることができます。

HttpPostedFile imageFile = HttpContext.Current.Request.Files["image"]; 

と、例えば、ユーザーID /ユーザー名：

var userId = Int32.Parse(HttpContext.Current.Request.Params["userId"]); 
var userName = Int32.Parse(HttpContext.Current.Request.Params["userName"])