在 ASP.NET Core 中使用 jQuery AJAX 选择输入字段和多个文件的发布表单

Question

我正在尝试在用户完成选择多个文件后立即使用 jQuery AJAX 在 ASP.NET Core 中手动发布表单。我正在使用的 Uploader 有一个“selected”事件，我想使用 jQueryAJAX 将表单发布到服务器。

当向表单添加提交按钮并在 UI 上单击它时，此完全相同的表单会完美地发布到服务器。 Files 已绑定，ProductId 已绑定。但是，我试图避免页面闪烁。作为替代解决方案，我通过调用提交表单： $("#form").submit();在 onSelect 函数中而不是在 AJAX 请求中。

模型如下所示：

public int ProductId { get; set; }
public IList<IFormFile> Files { get; set; }

表单如下所示：

<form method="post" enctype="multipart/form-data">
     <ejs-uploader id="Files" showFileList="false" autoUpload="false" multiple="true" selected="onSelected" success="onSuccess" allowedExtensions=".doc, .docx, .pdf, .jpg, .jpeg, .png"></ejs-uploader>
     <input asp-for="ProductId" type="hidden" />
</form>

这是我一直在尝试但不起作用的 JavaScript：

    function onSelected(args) {
        var files = args.filesData;
        var formData = new FormData();

        for (var i = 0; i != files.length; i++) {
            formData.append("files[]", files[i]);
        }

        $.ajax({
            type: "POST",
            contentType: false,
            url: '?handler=FileUpload',
            data: formData,
            processData: false,
            headers: {
                RequestVerificationToken:
                    $('input:hidden[name="__RequestVerificationToken"]').val()
            },
            success: function (data) {

            },
        });

        //$("#form").submit();
    }

我用的是razer pages所以操作方法是：

[BindProperty]
public int MessageId { get; set; }

[BindProperty]
public IList<IFormFile> Files { get; set; }

public async Task<ActionResult> OnPostAsync()
{
}

我也尝试过创建一个视图模型：FileUploadViewModel，其中包含相同的 2 个属性。

public async Task<ActionResult> OnPostAsync(FileUploadViewModel vm)
{
}

Answer 1

我参加聚会可能有点晚了，但是我遇到了完全相同的问题，我想使用 ajax 手动发布我的请求以及用户输入的任何表单值以及任何要上传的选定文件。

因为我是使用 ajax 手动调用控制器，所以没有包含文件。
这是我的 ajax 发布请求。

 $.ajax({
        type: 'POST',
        url: '/home/createorder',
        data: new FormData(document.forms[0]),
        contentType: false,
        processData: false,
        crossDomain: true,
        success: function (data) {
               console.log(data);
               window.location.replace(data.redirectUrl);
        },
        error: function (data) {
                console.log(data);
                alert(data.responseJSON.error);
        },
 })

这是我的模特的财产。

public IReadOnlyCollection<IFormFile> AttachmentCollection { get; set; }

最后这是我的cshtml页面构成

 <div class="card card-5">
        <div class="card-heading">
            <h2 class="title">Attachments</h2>
        </div>
        <div class="card-body">
            <div class="form-row">
                <div class="custom-file">
                    <input asp-for="AttachmentCollection" class="form-control custom-file-input" multiple>
                    <label class="custom-file-label">Choose File...</label>
                </div>
            </div>
        </div>
    </div>

注意：确保在您的 <form> 中包含此 enctype="multipart/form-data"

Answer 2

根据FormData.append()，我认为你必须使用

formData.append("files[]", files[i]);

代替

formData.append("files", files[i]);

要追加多个文件...

Answer 3

您可以将附件作为 IEnumerable 类型的单独控制器参数接收，请注意，为了正确完成映射，您必须为 html 输入文件控件选择正确的命名，例如，如果您的控制器将具有以下签名

public ActionResult SaveProduct(Product newproduct , IEnumerable<HttpPostedFileBase> files) 

那么html输入控件必须命名为：

<input type='file' name='files[0]'/>
<input type='file' name='files[1]'/>
<input type='file' name='files[2]'/>

等等

不知道是否有一个选项可以直接将控件绑定到模型而不创建自定义模型绑定器，但我一直使用这个选项，相当简单和容易