我有这个提交代码,
$('#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控制器中。
serialized form
这里的问题是,当我添加此ajax属性时contentType: false,,我可以成功回传文件,但是绑定的模型为null。
contentType: false,
另一方面,如果删除此属性,则绑定的模型工作正常。但是问题是文件未在服务器中发送。
我该如何工作?我希望表格和图像都在服务器端发送。
更新 这现在正在工作,我唯一更改的行是
formData.append("product", form.serialize());
至
var other_data = $('#addProductForm').serializeArray(); $.each(other_data, function (key, input) { formData.append(input.name, input.value); });
有人可以解释发生了什么吗?我没有头绪
不幸的是,jQuery serialize()方法将不包含输入文件元素。因此,您的文件不会包含在序列化值中。
serialize()
您可以做的是创建一个FormData对象,然后将文件附加到该对象。您还需要将表单字段值附加到此相同的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) { } });
以及您的操作方法,您可以添加另一个参数类型IEnumerable<HttpPostedFileBase>,其名称与我们设置为表单数据的名称相同productImg。
IEnumerable<HttpPostedFileBase>
productImg
[HttpPost] public virtual ActionResult Index(ProductModel model, IEnumerable<HttpPostedFileBase> productImg) { // to do :Look through productImg and do something }