在选择时使用 ajax 在 asp.net 核心中上传多个文件答案

【问题标题】：Multiple file upload in asp.net core using ajax on selection在选择时使用 ajax 在 asp.net 核心中上传多个文件
【发布时间】：2021-03-31 23:54:20
【问题描述】：

我是 asp.net core 的新手，我想在 asp.net core 中使用 ajax 在用户文件选择上上传多个文件。我使用带有输入文件标签的剃须刀页面。

我按照本文的每一步https://codepedia.info/ajax-file-upload-aspnet-core-razor-pages

我可以调用文件选择事件，但是 jquery ajax 函数没有被调用，服务器端代码没有调试，因此没有文件上传。不是单个文件上传。我的代码没有进入调试模式。

代码

   $("#fileUpload").on('change', function () {

                var files = $('#fileUpload').prop("files");                
                var url = "/Index?handler=MyUploader";
                formData = new FormData();
                formData.append("MyUploader", files);              
               
                jQuery.ajax({
                    type: 'POST',
                    url: url,
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN",
                            $('input:hidden[name="__RequestVerificationToken"]').val());
                    },
                    success: function (repo) {
                        if (repo.status == "success") {
                            alert("File : " + repo.filename + " is uploaded successfully");
                        }
                    },
                    error: function (data) {

                        console.log(data);
                    }
                });
            });

ERROR SCREENSHOT

 public IActionResult OnPostMyUploader(IFormFile MyUploader)
        {
            if (MyUploader != null)
            {
                string uploadsFolder = Path.Combine(webHostEnvironment.WebRootPath, "mediaUpload");
                string filePath = Path.Combine(uploadsFolder, MyUploader.FileName);
                using (var fileStream = new FileStream(filePath, FileMode.Create))
                {
                    MyUploader.CopyTo(fileStream);
                }
                return new ObjectResult(new { status = "success" });
            }
            return new ObjectResult(new { status = "fail" });
    
        }

【问题讨论】：

您的函数被调用，返回的代码 400 表示请求数据有问题。您应该使用您的页面处理程序 MyUploader 详细信息更新问题。
好吧，添加我的其他代码是毫无希望的
这种错误可以在调试控制台（Output 窗口）中很好地报告其详细信息。你应该先看看那个窗口。我怀疑XSRF-TOKEN 不是您的防伪令牌的正确标题。在我最近的项目中，我改用RequestVerificationToken。看起来它会随着不同版本的 asp.net core 而变化
@sabsudo 你是否在ConfigureServices 中设置了services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");。
我正在使用 aspnet core 3.1 版本，你希望我使用 RequestVerificationToken 而不是 XSRF-TOKEN

标签： c# jquery ajax asp.net-core razor-pages

【解决方案1】：

AntiForgeryToken 是由帖子表单标签自动生成的隐藏输入。起初，我在页面中有一个表单，所以我没有添加@Html.AntiForgeryToken()，它也有效。如果页面中没有表单，那么你应该添加@Html.AntiForgeryToken()来生成它。

【讨论】：