在 mvc 上使用 ajax 发送文件和文本参数
Posted
技术标签:
【中文标题】在 mvc 上使用 ajax 发送文件和文本参数【英文标题】:send file and text parameters using ajax on mvc 【发布时间】:2018-09-20 02:14:18 【问题描述】:检查下面的 jquery 代码。在这里,我从 html 中获取文件,然后通过 ajax 调用将其发布到我的 Controller Post 方法。如您所见,从 Controller post 方法中,我成功地在名为 files
的变量中接收了该文件。但我的问题是如何从这个 ajax 调用中发送另外两个名为 - type
和 id
的文本参数,那么我如何使用该文件从控制器获取该值?基本上我也必须用那些文本值来获取那个文件。这怎么可能? ajax 和控制器需要什么改变?
HTML:
<div class="col-sm-3" style="float:left;">
<label class="btn btn-outline-dark btn-block">
Browse...
<span id="uploaded-file-name" style="font-style: italic"></span>
<input id="file-upload" type="file" name="file"
onchange="$('#uploaded-file-name').text($('#file-upload')[0].value);" hidden>
</label>
</div>
<div class="col-sm-2" style="float:left;">
<button class="btn btn-dark" id="start_upload">Start Upload</button>
</div>
jQuery ajax:
//file upload
$("#start_upload").click(function (evt)
var fileUpload = $("#file-upload").get(0);
var files = fileUpload.files;
var data = new FormData();
for (var i = 0; i < files.length; i++)
data.append(files[i].name, files[i]);
$.ajax(
type: "POST",
url: "/Products/UploadFiles",
contentType: false,
processData: false,
data: data,
success: function (message)
alert(message);
,
error: function ()
alert("There was error uploading files!");
);
);
MVC .net 核心控制器:
[HttpPost]
public IActionResult UploadFiles()
//file upload process
var files = Request.Form.Files;
string type = "";
int id = ;
【问题讨论】:
【参考方案1】:您可以将其他输入字段值添加到 FormData 对象。
我将首先创建一个用于接受 ajax 有效负载的视图模型
public class UploadVm
public string Type set; get;
public string Id set; get;
public HttpPostedFileBase File set; get;
现在在您的视图中,再添加 2 个输入元素以从用户那里读取此值
<input id="id" type="text" />
<input id="type" type="text" />
现在在您的 ajax 调用代码中,向 FormData
对象添加另外 2 个项目。
$("#start_upload").click(function (evt)
var fileUpload = $("#file-upload").get(0);
var files = fileUpload.files;
var data = new FormData();
for (var i = 0; i < files.length; i++)
data.append("File", files[i]);
//Add the input element values
data.append("Type", $("#type").val());
data.append("Id", $("#id").val());
$.ajax(
type: "POST",
url: "/Products/UploadFiles",
contentType: false,
processData: false,
data: data,
success: function (message)
console.log(message);
,
error: function ()
alert("There was error uploading files!");
);
);
现在在您的服务器端,您可以使用我们的新视图模型作为操作方法的参数。当进行 ajax 调用时,模型绑定器将能够映射从请求中接收到的数据,并将其映射到我们的 UploadVm
视图模型对象的属性。
[HttpPost]
public ActionResult UploadFiles(UploadVm model)
// to do : read values of model and use it
// to do : return something
【讨论】:
你这个更聪明的答案。【参考方案2】:我在这里所做的是,只需将带有值的键插入到来自 jquery 的 FormData()
obj 中,然后您就可以从控制器中获取它。如果您想了解更多关于FormData()
的信息,那么read here
把你的jquery改成这个-
//file upload
$("#start_upload").click(function (evt)
var fileUpload = $("#file-upload").get(0);
var files = fileUpload.files;
var data = new FormData();
data.append('type', 'your_type');
data.append('id', '1');
for (var i = 0; i < files.length; i++)
data.append(files[i].name, files[i]);
$.ajax(
type: "POST",
url: "/Products/UploadFiles",
contentType: false,
processData: false,
data: data,
success: function (message)
alert(message);
,
error: function ()
alert("There was error uploading files!");
);
);
然后通过它的键从控制器中获取这些值:
[HttpPost]
public IActionResult UploadFiles()
//file upload process
var files = Request.Form.Files;
string type = Request.Form.Where(x => x.Key == "type").FirstOrDefault().Value;
string id = Request.Form.Where(x => x.Key == "id").FirstOrDefault().Value;
【讨论】:
以上是关于在 mvc 上使用 ajax 发送文件和文本参数的主要内容,如果未能解决你的问题,请参考以下文章
AJAX 发布到 ASP.NET MVC 6 控制器操作方法和参数为空
图书管理的图书增删改查choices参数MTV与MVC模型多对多关系的三种创建方式Ajax操作前后端传输数据编码格式ajax发送json格式数据ajax发送文件django自带的序列化
图书管理的图书增删改查choices参数MTV与MVC模型多对多关系的三种创建方式Ajax操作前后端传输数据编码格式ajax发送json格式数据ajax发送文件django自带的序列化