英文:
Ajax file upload in .Net 6 Razor pages sends Null in the codebehind
问题
已经尝试过这个答案，但它没有起作用。所以正在寻求帮助。
我有一个.NET 6 Razor页面，我正在尝试从这里上传文件。
这是我的AjaxFileUpload.CSHtml：
<h3>Ajax文件上传</h3>
<form method="post">
<div class="mb-3">
<label for="formFile" class="form-label">选择文件 1</label>
<input class="form-control" type="file" id="formFile1">
<br/>
<button type="button" class="btn btn-info" onclick="UploadFile1ViaAjax()">上传文件 1</button>
<span id="File1UploadStatus"></span>
</div>
</form>
Ajax调用：
<script>
function UploadFile1ViaAjax()
{
var file1 = $('#formFile1').prop("files")[0];
var url = "/Employees/AjaxFileUpload?handler=UploadFile1";
formData = new FormData();
formData.append(file1.name, file1);
alert("上传文件 1: " + file1.name);
$.ajax({
type: "POST",
url: url,
contentType: 'multipart/form-data',
contentType: false,
processData: false,
data: formData,
headers: {
RequestVerificationToken:
$('input:hidden[name="__RequestVerificationToken"]').val()
},
success: function (result) {
alert("成功: " + JSON.stringify(result));
},
failure: function (result) {
alert("失败");
},
error: function (result) {
alert("错误");
},
}).done(function (result) {
alert("Ajax调用完成。");
});
}
</script>
最后，这是AjaxFileUpload.CSHtml.cs中的代码后端方法：
public IActionResult OnPostUploadFile1(IFormFile formData)
{
if (formData != null)
{
return new ObjectResult(new { status = "success" });
}
return new ObjectResult(new { status = "fail" });
}
当我上传文件并单击按钮时，Ajax调用起作用，调试器会进入代码后端方法，但问题是，IFormFile对象始终为null。
为什么会发生这种情况？如何让IFormFile对象包含我上传的文件数据？
英文:
Already tried This Answer but it did not work. So seeking help.
I have a .Net 6 Razor page from where I am trying to upload a file.
Here is my AjaxFileUpload.CSHtml
<h3>Ajax File Upload</h3>
<form method="post">
<div class="mb-3">
<label for="formFile" class="form-label">Select File 1</label>
<input class="form-control" type="file" id="formFile1">
<br/>
<button type="button" class="btn btn-info" onclick="UploadFile1ViaAjax()">Upload File 1</button>
<span id="File1UploadStatus"></span>
</div>
</form>
The Ajax Call
<script>
function UploadFile1ViaAjax()
{
var file1 = $('#formFile1').prop("files")[0];
var url = "/Employees/AjaxFileUpload?handler=UploadFile1";
formData = new FormData();
formData.append(file1.name, file1);
alert("Uploading file 1 : " + file1.name);
$.ajax({
type: "POST",
url: url,
contentType: 'multipart/form-data',
contentType: false,
processData: false,
data: formData,
headers: {
RequestVerificationToken:
$('input:hidden[name="__RequestVerificationToken"]').val()
},
success: function (result) {
alert("success: " + JSON.stringify(result));
},
failure: function (result) {
alert("failure");
},
error: function (result) {
alert("error");
},
}).done(function (result) {
alert("ajax call complete.");
});
}
</script>
Finally here is the code behind method AjaxFileUpload.CSHtml.cs
public IActionResult OnPostUploadFile1(IFormFile formData)
{
if (formData != null)
{
return new ObjectResult(new { status = "success" });
}
return new ObjectResult(new { status = "fail" });
}
When I upload a file and click the button, The ajax call works and debugger is hit in the code behind method, but the problem is, the IFormFile object is always coming as null.
Why is this happening? How can I get the IFormFile object populated with file data that I am uploading ?
答案1
得分: 0
问题出在你的C#端点内的参数名称与ajax调用不匹配。尝试将formdata.append("fileName", file)设为，然后在你的端点中也将参数命名为fileName。否则，你应该通过提交表单或将文件上传为base64来上传它。
英文:
The problem is because the name of the parameter inside your C# endpoint doesn't match the ajax call. Try setting the formdata.append("fileName", file) and call the parameter in your endpoint fileName too. Other wise you should upload it either through submitting a form. Or uploading the file as base64
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论