如何使用ajax将包含上传文件和字符串的数据对象发送到控制器？

Posted 2023-04-13

【中文标题】如何使用ajax将包含上传文件和字符串的数据对象发送到控制器？

【英文标题】：How to send data object which contain upload files and string to controller using ajax?

【发布时间】：2019-09-23 18:40:51

【问题描述】：

我正在使用 ajax 向我的控制器发送包含上传文件数据和一些字符串值的对象数组，但发送失败。

我也尝试过使用 formdata，但没有成功。我想知道如何将数据发送到控制器。

jquery/查看代码：

function SaveBrandDetail() 
    debugger;
    var data = new Array();
    var tablecount = 0;        
    $(".DataRow").each(function () 
        tablecount = tablecount + 1;
        var row = 
            "SaleStartDateString": $(this).find(".clsSaleStartDateForVal").val(),
            "BrandDetailId": $(this).find(".clsBrandDetailId").val(),
            "SaleExpiryDateString": $(this).find(".clsSaleEndDateForVal").val(),
            "BrandId": $(this).find(".clsBrandId").val(),
            "Amount": $(this).find(".clsAmount").val(),
            "CategoryId": $(this).find(".clsSubCategoryId").val(),
            "ParentCategoryId": $(this).find(".clsParentCategoryId").val(),
            "fileUpload": $(this).find(".fileUploadData").get(0).files[0]

        ;

        data.push(row);
    );    

        $.ajax(
            url: '@Url.Action("SaveData","Data")',
             type: "POST",
             dataType: 'json',
             contentType: 'application/json;',
             data: JSON.stringify(data),
             success: function (msg) 

             ,
             error: function () 

             
         );

控制器文件：

 public ActionResult SaveData(List<Data> data)
 

        bool saved = false;
  

我希望在我的控制器中接收带有上传文件的数据。我已经在我的模态类中声明了 HttpPostedFileBase。

【问题讨论】：

文件上传需要使用FormData。

我使用过，但出现错误你能修改我的表单数据代码吗？ @vinothkumar

【参考方案1】：

 var formData = new FormData();
 $(".DataRow").each(function () 
        tablecount = tablecount + 1;
        var row = 
            "SaleStartDateString": $(this).find(".clsSaleStartDateForVal").val(),
            "BrandDetailId": $(this).find(".clsBrandDetailId").val(),
            "SaleExpiryDateString": $(this).find(".clsSaleEndDateForVal").val(),
            "BrandId": $(this).find(".clsBrandId").val(),
            "Amount": $(this).find(".clsAmount").val(),
            "CategoryId": $(this).find(".clsSubCategoryId").val(),
            "ParentCategoryId": $(this).find(".clsParentCategoryId").val(),
            "FileName": $(this).find(".fileUploadData").get(0).files[0].name
        ;
        var file = $(this).find(".fileUploadData").get(0).files[0];
        formData.append(file.name, file);
        data.push(row);
    );    
    formData.append("data", JSON.stringify(data));
    $.ajax(
            url: '@Url.Action("SaveData","Data")',
             type: "POST",
             dataType: 'json',
             data: formdata,
             processData: false,
             contentType: false,
             success: function (msg) 

             ,
             error: function () 

             
         );


public ActionResult SaveData(string data)
 
    var files = Request.Files;
    List<Data> d = JsonConvert.Deserialize<List<Data>>(data);
    foreach(var item in d)
    
      var file = files[item.FileName];
    
        bool saved = false;
  

【讨论】：

在 ajax 数据对象中发送什么？

我怎么知道哪个文件对应哪个记录？@uxmaan ali

我添加了文件名来发送文件。你可以设置 BrandDetailId 或你想要设置的东西。我不是说服务器端不检索文件

您可以在将行推送到数据数组时在数据对象中发送文件名。在服务器上你可以通过 Request.Files["name"]

Request.Files 在控制器中总是为空。