javascript - 输入类型文件在 jquery ajax 中未序列化

Question

这个问题已经有答案了:

How to append whole set of model to formdata and obtain it in MVC (4 个回答)

已关闭 5 年前。

下面是我在提交时将表单返回到 jquery 函数时的 razor 代码。

 @model Slider
    @{

         Layout = null;
     }

    @using (Html.BeginForm("AddOrEdit", "Slider", FormMethod.Post, new { enctype  = "multipart/form-data" , onsubmit = "return   SubmitForm(this)" }))
    {
      @Html.HiddenFor(m => m.Id)



     <div class="form-group" style="height:270px;">
      @Html.LabelFor(m => m.ImageFile, new { @class = "blue-text", @style = 
      "font-size:16px", @id = "" })

 <input name="ImageFile" type="file"  />

 </div>

<div class="form-group">
     <input type="submit" value="Submit" class="btn btn-primary" />
     <input type="reset" value="Reset" class="btn" />
 </div>
 }

Jquery 函数无法序列化输入文件类型并将其发送到 Controller ，除非我将其更改为 json 。但如果我将其更改为 json，我将无法获得验证

  function SubmitForm(form) {
        debugger;
        $.validator.unobtrusive.parse(form);
        debugger;
        if ($(form).valid()) {
            debugger;
            $.ajax({
                type: "POST",
                url: form.action,
                //"datatype": "json"
                data: $(form).serialize(),
                success: function (data) {
                    if (data.success) {
                        Popup.dialog('close');
                        dataTable.ajax.reload();

                        $.notify(data.message, {
                            globalPosition: "top center",
                            className: "success"
                        })

                    } else {
                        Popup.dialog('close');

                        $.notify(data.message, {
                            globalPosition: "top center",
                            className: "error"
                        })
                    }
                }
            });
        }
        return false;
    }

Answer 1

尝试下面的代码并对 ajax 代码进行一些更改。在您的代码中添加以下参数。

processData: false,
contentType: false,

并在 ajax 启动之前添加 var formData = new FormData($("#formID")[0]); 行。

您应该使用 FormData 使用 ajax 上传文件。 $(form).serialize() 只会给你键和值。您可以使用下面的代码通过 AJAX 上传文件。

var formData = new FormData($(form)[0]);
$.ajax({
    url: form.action,
    type: form.method,
    data: formData,
    processData: false,
    contentType: false,

    success: function (response) {

    }
});