如何使用ajax上传文件到asp.net mvc控制器动作

我有这个提交代码，

$('#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, ，我可以成功回发文件，但绑定模型为null。

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

我怎样才能做到这一点？ 我希望表单和图像都在服务器端发送。

更新现在正在运行，我改变的唯一一条就是这个

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

至

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) { } }); 

和你的动作方法，你可以添加另一个IEnumerable类型的参数，其名称与我们设置的forms数据相同，即productImg 。

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

Answer 2

对于ASP.NET Core，您可以从模型开始：

 public class FilesViewModel { public Guid? ParentObjectId { get; set; } // if you wish to associate these files with some parent record public IEnumerable 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 
      

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