检查下面的 jquery 代码。在这里,我从 html 中抓取文件,然后通过 ajax 调用将其发布到我的 Controller Post 方法。正如您所看到的,从 Controller post 方法中,我成功地在名为 files
的变量中接收到该文件。但我的问题是,我如何从这个 ajax 调用中发送另外两个名为 - type
和 id
的文本参数,然后我如何使用该文件从 Controller 获取该值?基本上我还必须获取带有这些文本值的文件。这怎么可能? ajax 和 Controller 需要什么改变?
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核心 Controller :
[HttpPost]
public IActionResult UploadFiles()
{
//file upload process
var files = Request.Form.Files;
string type = "";
int id = ;
}
最佳答案
您可以将其他输入字段值添加到 FormData 对象。
我首先创建一个 View 模型来接受 ajax 负载
public class UploadVm
{
public string Type { set; get; }
public string Id { set; get; }
public HttpPostedFileBase File { set; get; }
}
现在,在您的 View 中,再添加 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!");
}
});
});
现在在您的服务器端,您可以使用我们的新 View 模型作为操作方法的参数。当进行 ajax 调用时,模型绑定(bind)器将能够映射从请求接收到的数据,并将其映射到我们的 UploadVm
View 模型对象的属性。
[HttpPost]
public ActionResult UploadFiles(UploadVm model)
{
// to do : read values of model and use it
// to do : return something
}
关于c# - 在mvc中使用ajax发送文件和文本参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52416591/