javascript - ASP.net 核心 Razor 页面文件使用 AJAX 上传到 IFormFile 处理程序返回 404 Not Found

问题描述

我有一个非常简单的任务，只需要上传一个文件并让 AJAX 将其发布到索引页面：

    <input type="file" id="file-selector" accept=".txt">

相关的Javascript：

const fileSelector = document.getElementById('file-selector');
fileSelector.addEventListener('change', (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.addEventListener('load', event => {
        const txtFile = event.target.result;
        $.ajax({
            type: "POST",
            url: "/ControlData?handler=FileUploader",
            error: function (request, status, error) { alert(request.responseText); },
            data: txtFile,
            cache: false,
            contentType: false,
            processData: false,
            headers: { "RequestVerificationToken": "@token" }
        });
    });
    reader.readAsText(file);
});

/Pages/ControlData/Index.cshtml.cs 中的代码：

    public IActionResult OnPostFileUploaderAsync(IFormFile model)
    {
        return null;
    }

应用程序运行良好，文件被选中，但 POST 调用总是得到 404：

标签： javascriptajaxasp.net-corerazor

应用程序运行良好，文件被选中，但 POST 调用总是得到 404

请检查您是否使用路由数据参数@page "{title}"等配置了页面路由，这会导致 HTTP 404 错误。

需要上传文件并让 AJAX 将其发布到索引页面

/Pages/ControlData/Index.cshtml.cs 中的代码

公共 IActionResult OnPostFileUploaderAsync（IFormFile 模型）

要将所选文件发布到您的处理程序OnPostFileUploaderAsync，您可以尝试修改如下代码。

<script>
    const fileSelector = document.getElementById('file-selector');
    fileSelector.addEventListener('change', (event) => {
        const file = event.target.files[0];
        
        //post the selected file through formdata
        //instead of using the readAsText() method to read the contents of the specified file

        var txtFile = new FormData();
        txtFile.append("model", file);

        $.ajax({
            type: "POST",
            url: "/ControlData/Index?handler=FileUploader",
            error: function (request, status, error) { alert(request.responseText); },
            data: txtFile,
            cache: false,
            contentType: false,
            processData: false,
            headers: { "RequestVerificationToken": "@token" }
        });
    });
</script>

测试结果

javascript - ASP.net 核心 Razor 页面文件使用 AJAX 上传到 IFormFile 处理程序返回 404 Not Found

问题描述

解决方案

推荐阅读