如何使用 $.ajax 和 asp.net MVC 发布 FileReader 对象

本文关键字：MVC 发布 FileReader 对象 net asp 何使用 ajax | 更新日期: 2023-09-27 17:56:13

我想先添加临时图像，然后在提交时，我想将所有这些图像添加到服务器。

这是我的班级

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

这是我的脚本

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

这是我的单击事件，它将临时图像添加到数组中。

$(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 null。

如何使用 $.ajax 和 asp.net MVC 发布 FileReader 对象

您应该使用

FormData 装饰您的 api 对象，以便能够使用 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"])
相关文章：