無法綁定表單數據和控制器

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