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

Question

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

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>

这是javascript

function uploadbookfunc() {
    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',
        contentType: false,
        processData: false,
        data: formData,
        success: function (response) {
            alert(response);
        },
        failure: function (response) {
            alert('failed');
        }
    });
         
}

这是操作方法

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; }
}

Answer 1

根据您的代码，您似乎想要发出 AJAX 请求，以将包含其他数据的文件上传到 ASP.NET Core Razor 页面处理程序方法。

为了实现，您可以尝试修改如下代码。

在Upload.cshtml

<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>
}

在Upload.cshtml.cs

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");
    }
}

测试结果

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

send FormData with two files and text to controller

javascript

c#

ajax

multipartform-data

asp.net-core