使用 AJAX 将图像上传到 ASP.NET 核心应用

Question

我是 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 方法。我究竟做错了什么？ html页面和脚本位于 wwwroot，控制器在 Controllers 文件夹中。

Answer 1

首先，您的操作应将图像作为参数：

// 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]);

使用 AJAX 将图像上传到 ASP.NET 核心应用

Uploading image to ASP.NET Core app using AJAX

javascript

ajax

jquery

image-uploading

asp.net-core