无法绑定表单数据和控制器

Question

上传的文件，我有这样的代码提交，

$('#form').on('submit',function (e) { 
    e.preventDefault(); 
    //var file = $("#productImg"); 
    var fileUpload = $("#productImg").get(0); 
    var files = fileUpload.files; 


    var form = $("#form"); 
    var formData = new FormData(); 
    formData.append("product", form.serialize()); 

    // Looping over all files and add it to FormData object 
    for (var i = 0; i < files.length; i++) { 
     formData.append(files[i].name, files[i]); 
    } 
    //formData.append("file", file); 

    $.ajax({ 
     type: 'POST', 
     url: baseUrl + 'Controller/Action', 
     data: formData, 
     processData: false, 
     contentType: false, 
     success: function (data) { 
     } 
    }); 
}); 

这是我的控制器：

public JsonResult AddProduct(ProductModel product) // data is binded in the model if I remove content type property 
    { 
     var isSuccess = false; 

     if (product != null) 
     { 
      try 
      { 
       if (Request.Files.Count > 0) // works ok if I added the content type property 
       { 
        var sadas = "sad"; 
       } 

所以这里发生了什么是我的serialized form数据发送到MVC控制器连同上传的文件。

这里的问题是，当我添加此ajax属性contentType: false,，我可以成功回发文件，但绑定模型为空。

另一方面，如果我删除此属性，绑定模型工作正常。但问题是文件没有在服务器中发送。

我该如何做这项工作？我希望表单和图像在服务器端发送。

UPDATE 这是现在的工作，我唯一改变的行都是这样的

formData.append("product", form.serialize());

TO

var other_data = $('#addProductForm').serializeArray(); $.each(other_data, function (key, input) { formData.append(input.name, input.value); });

有人能解释发生了什么事？我不知道

Answer 1

不幸的是，jQuery serialize()方法将不包括输入文件元素。所以你的文件不会被包含在序列化的值中。

你可以做的是，创建一个FormData对象，将文件附加到该对象。您还需要将表单字段值附加到相同的FormData对象。您可以简单地遍历所有输入字段并添加它。

当您添加文件以形成数据时，您需要提供一个与您将在HttpPost操作方法中使用的参数相匹配的名称。

这应该工作。

var fileUpload = $("#productImg").get(0); 
var files = fileUpload.files; 

var formData = new FormData(); 

// Looping over all files and add it to FormData object 
for (var i = 0; i < files.length; i++) { 
    console.log('(files[i].name:' + files[i].name); 
    formData.append('productImg', files[i]); 
} 

// You can update the jquery selector to use a css class if you want 
$("input[type='text'").each(function (x, y) { 
    formData.append($(y).attr("name"), $(y).val()); 
}); 

$.ajax({ 
    type: 'POST', 
    url: 'ReplaceHereYourUrltotheActionMethod', 
    data: formData, 
    processData: false, 
    contentType: false, 
    success: function (data) { 
    } 
}); 

和你的操作方法，你可以用名字一样是我们形成集数据，这是productImg增加IEnumerable<HttpPostedFileBase>类型的其他参数。

[HttpPost] 
public virtual ActionResult Index(ProductModel model, 
               IEnumerable<HttpPostedFileBase> productImg) 
{ 
    // to do :Look through productImg and do something 
} 

Answer 2

对于ASP。NET的核心，你可以用你的模型开始这样做：

public class FilesViewModel 
{ 
    public Guid? ParentObjectId { get; set; } // if you wish to associate these files with some parent record 
    public IEnumerable<IFormFile> Files { get; set; } 
} 

你的控制器：

[HttpPost] 
public JsonResult UploadFiles(FilesViewModel model) 
{ 
    if (ModelState.IsValid) 
    { 
     // your code here 
     // see https://docs.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads 
    } 
} 

您的视图（或视图组件）：

@model YourProject.ViewModels.EventFilesViewModel 
<form method="post" enctype="multipart/form-data"> 
    <input type="hidden" asp-for="ParentObjectId" /> 
    <input type="file" asp-for="Files" multiple /> 
    <span asp-validation-for="Files" class="text-danger"></span> 
    <input type="button" id="btnEventFilesUpload" value="Upload Selected Files" class="btn btn-default" /> 
</form> 

而且，最后， javascript（修改自Shyju的答案以通过ParentObjectId）：

$(function() { 
    $("#btnEventFilesUpload").click(function (evt) { 
     var fileUpload = $("#Files").get(0); 
     var files = fileUpload.files; 
     var data = new FormData(); 
     for (var i = 0; i < files.length; i++) { 
      data.append('Files', files[i]); 
     } 
     // if you wish to associate these files with some parent record 
     data.append('ParentObjectId', $('#ParentObjectId').val()); 
     $.ajax({ 
      type: "POST", 
      url: "/Event/UploadFiles", 
      contentType: false, 
      processData: false, 
      data: data, 
      success: function (message) { 
       alert(message); 
      }, 
      error: function() { 
       alert("There was error uploading files!"); 
      } 
     }); 
    }); 
});