發佈的對象，並在同一個呼叫文件到服務器jQuery.ajax

Question

我試圖做一個客戶端後下面的MVC操作方法：

[HttpPost] 
public void Create(ProductModel product, HttpPostedFileBase imageFile) 
{ 
    productServices.AddProduct(product, imageFile); 
} 

這是一個簡單的類型=「提交」按鈕，但在我的特殊情況下，我需要用ajax調用。

我可以簡單地將JSON傳遞給ProductModel。

$.ajax({ 
    url: '/Product/Create', 
    type: 'POST', 
    data: JSON.stringify({product: { 
      Id: 1, 
      Name: "SomeName" 
     } 
    }), 
    contentType: 'application/json; charset=utf-8', 
    success: function (data) { 
     alert("Product Created!"); 
    } 
}); 

我還可以將文件傳遞的FORMDATA

var imageFileData = new FormData(); 
imageFileData.append('imageFile', myFileObject); 

$.ajax({ 
    url: '/Product/Create', 
    data: imageFileData, 
    cache: false, 
    contentType: false, 
    processData: false, 
    type: 'POST', 
    success: function (data) { 
     alert(data); 
    } 
}); 

但是我似乎無法因爲他們是完全不同的CONTENTTYPES到2作爲單獨的參數在同一個呼叫相結合。

這可能嗎？我是否以這種錯誤的方式去做？任何幫助，將不勝感激。

Answer 1

您可以將JSON添加到FORMDATA就像你添加的文件

var imageFileData = new FormData(); 
imageFileData.append('imageFile', myFileObject); 
imageFileData.append('product', JSON.stringify({product: { 
      Id: 1, 
      Name: "SomeName" 
     }); 

$.ajax({ 
    url: '/Product/Create', 
    data: imageFileData, 
    cache: false, 
    contentType: false, 
    processData: false, 
    type: 'POST', 
    success: function (data) { 
     alert(data); 
    } 
}); 

你

可以窗體本身添加到FORMDATA

$.ajax({ 
    url: '/Product/Create', 
    data: new FormData(theFormElement), 
    cache: false, 
    contentType: false, 
    processData: false, 
    type: 'POST', 
    success: function (data) { 
     alert(data); 
    } 
});