我是jQuery和AJAX的新手，我正尝试使用它将图像上传到服务器。我有一个简单的HTML页面
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
<form method="post" enctype="multipart/form-data">
Select image to upload:
<input id="profilePic" name="picture" type="file" size="1" onchange="uploadFile('profilePic');" />
</form>
脚本文件在哪里
function uploadFile(inputId) {
var fileUpload = $("#" +inputId).get(0);
var files = fileUpload.files;
var formData = new FormData();
formData.append(files[0].name, files[0]);
$.ajax({
url: '/Image/File',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function (result) {
}
});
在名为ImageController的控制器中，我有一个名为File的POST方法，该方法带有零个参数：
[HttpPost]
public IActionResult File()
{
var file = Request.Form.Files[0];
if (file != null)
{
//work
}
return null;
}
但是每次我提交图像以形成任何形式的内容时，都不会得到代码500：内部服务器错误，无法加载资源。我在代码中放置了断点，但从未输入File方法。我究竟做错了什么？ htmlpage和脚本位于wwwroot中，控制器位于Controllers文件夹中。
最佳答案
首先，您的操作应将图像作为参数：
// Don't use `File` here. You're hiding the base `File` method.
public IActionResult FileUpload(IFormFile file)
{
// Always check content length
if (file?.ContentLength > 0)
{
//work
}
return null;
}
然后，在您的JS中，
FormData.append的第一个参数应该是数据名称，而不是文件名。由于操作参数为file，因此此处的名称也应为file：formData.append('file', files[0]);