Wie FileReader-Objekt mit $ .ajax und asp.net MVC

Question

zu posten Ich möchte temporäre Bilder zuerst und dann beim Senden ich möchte alle diese Bilder zum Server hinzufügen.

Hier ist meine Klasse

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; } 
} 

Hier mein Skript

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

hier ist mein Click-Ereignis ist, das temporäre Bild auf dem Array hinzufügt.

$(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); 


     }) 
}) 

Hier ist das letzte Submit-Ereignis, das Daten an den Server übermittelt.

$.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");  
      } 
     }); 

hier ist meine Aktion

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

aber in dieser Aktion i erhalten Model.AcademicDetails null.

Answer 1

Sie sollten Ihr API-Objekt mit FormData dekorieren, um die Möglichkeit zu haben, Formulardaten mit Bildern/Dateien auf dem Server mit Ajax zu posten.

Einfaches Beispiel:

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) { 
      } 
     }); 
    }; 

Hinweis: Ihre HTML-Formular sollte enctype = "multipart/form-data"

als in der Steuerung haben, können Sie übergebenen Daten in einer solchen Art und Weise zuzugreifen:

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

und zum Beispiel userId/benutzername:

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