Javascript 将带有两个文件和文本的FormData发送到控制器

我正在尝试发送一个FormData对象，其中包含一些文本字段、一个图像文件和一个pdf文件到控制器中的一个动作。但它可以免费将表单数据发送到操作。在浏览器中调试不会显示任何错误或任何内容。请指导我遗漏了什么或做错了什么

html

<form>
    <input type="text" id="title" placeholder="Title" />
    <br />
    <br />
    <input type="text" id="auth" placeholder="Author" />
    <br />
    <br />
    <input type="text" id="dept" placeholder="Department" />
    <br />
    <br />
    <input type="text" id="price" placeholder="Price" />
    <br />
    <br />
    <input type="text" id="year" placeholder="Year published" />
    <br />
    <br />
    <label for="jpg">Select JPEG for Cover photo</label>
    <input type="file" id="jpg" />
    <br />
    <br />
    <label for="pdf">Select PDF</label>
    <input type="file" id="pdf" />
    <br />
    <br />
    <button type="submit" onclick="uploadbookfunc()">Submit</button>
</form>

这里是行动方法

public class UploadModel : PageModel
{
    public void OnGet()
    {
    }

    public IActionResult OnPostBookUpload()
    {            
        MemoryStream stream = new MemoryStream();
        Request.Body.CopyTo(stream);
        stream.Position = 0;
        using (StreamReader reader = new StreamReader(stream))
        {
            string requestBody = reader.ReadToEnd()
            // Write to database.....
        }
           
        return new JsonResult("Success");
    }
}

这是模型

public class UploadBook
{
    public string Id { get; set; }
    public string Title { get; set; }
    public string Author { get; set; }
    public string Department { get; set; }
    public double Price { get; set; }
    public int YearPublished { get; set; }        
    public IFormFile ImageFile { get; set; }
    public IFormFile PdfFile { get; set; }
}

---

根据您的代码，您似乎希望发出一个AJAX请求，将包含其他数据的文件上载到ASP.NET核心Razor pages处理程序方法

要实现它，您可以尝试修改代码，如下所示

在Upload.cshtml中

测试结果

---

根据您的代码，您似乎希望发出AJAX请求，将包含其他数据的文件上载到ASP.NET核心Razor pages处理程序方法

要实现它，您可以尝试修改代码，如下所示

在Upload.cshtml中

测试结果

---

有关反伪造令牌验证的更多信息，请查看此文档：有关反伪造令牌验证的更多信息，请查看此文档：

public class UploadBook
{
    public string Id { get; set; }
    public string Title { get; set; }
    public string Author { get; set; }
    public string Department { get; set; }
    public double Price { get; set; }
    public int YearPublished { get; set; }        
    public IFormFile ImageFile { get; set; }
    public IFormFile PdfFile { get; set; }
}

<form>
    <input type="text" id="title" placeholder="Title" />
    <br />
    <br />
    <input type="text" id="auth" placeholder="Author" />
    <br />
    <br />
    <input type="text" id="dept" placeholder="Department" />
    <br />
    <br />
    <input type="text" id="price" placeholder="Price" />
    <br />
    <br />
    <input type="text" id="year" placeholder="Year published" />
    <br />
    <br />
    <label for="jpg">Select JPEG for Cover photo</label>
    <input type="file" id="jpg" />
    <br />
    <br />
    <label for="pdf">Select PDF</label>
    <input type="file" id="pdf" />
    <br />
    <br />
    <button type="submit" onclick="uploadbookfunc()">Submit</button>
</form>
@Html.AntiForgeryToken()

@section scripts{
    <script>
        function uploadbookfunc() {
            //prevent it from submitting the form
            event.preventDefault();

            var title = document.getElementById("title").value;
            var author = document.getElementById("auth").value;
            var department = document.getElementById("dept").value;
            var price = document.getElementById("price").value;
            var yearpub = document.getElementById("year").value;
            const img = document.getElementById('jpg').files[0];
            const pdffile = document.getElementById('pdf').files[0];

            var formData = new FormData();
            formData.append("Title", title);
            formData.append("Author", author);
            formData.append("Department", department);
            formData.append("Price", price);
            formData.append("YearPublished", yearpub);
            formData.append("ImageFile", img);
            formData.append("PdfFile", pdffile);

            //console.log(formData);
            $.ajax({
                url: "/Upload?handler=BookUpload",
                type: 'POST',
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                contentType: false,
                processData: false,
                data: formData,
                success: function (response) {
                    alert(response);
                },
                failure: function (response) {
                    alert('failed');
                }
            });

        }
    </script>
}

public class UploadModel : PageModel
{
    [BindProperty]
    public UploadBook uploadBook { get; set; }
    public void OnGet()
    {
    }

    public IActionResult OnPostBookUpload()
    {
        //code logic here
        var title = uploadBook.Title;
        //...

        return new JsonResult("Success");
    }
}