如何使用ajax上传文件到asp.net mvc控制器操作
本文关键字:net asp mvc 控制器 操作 文件 何使用 ajax | 更新日期: 2023-09-27 17:59:26
我有这个提交代码,
$('#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());
TO
var other_data = $('#addProductForm').serializeArray();
$.each(other_data, function (key, input) {
formData.append(input.name, input.value);
});
有人能解释一下发生了什么吗?我不知道
遗憾的是,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<HttpPostedFileBase>
的参数,该参数的名称与我们设置为形成数据的名称相同,即productImg
。
[HttpPost]
public virtual ActionResult Index(ProductModel model,
IEnumerable<HttpPostedFileBase> productImg)
{
// to do :Look through productImg and do something
}
对于ASP。NET Core,你可以从你的模型开始:
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://learn.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!");
}
});
});
});