输入类型文件未在jquery ajax中序列化 [英] Input type file not getting serialized in jquery ajax

问题描述

当我在提交表单时将表单返回给jquery函数时，以下是剃须刀代码.

Below is the razor code when I'm returning the form to the jquery function on submit.

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

除非将我将其更改为json，否则Jquery函数无法序列化输入文件类型并将其发送到控制器.但是，如果我将其更改为json，我将无法获得验证

The Jquery function ain't able to serialize the input file type and send it to the controller unless I change it to json . But if I would change it to json I won't get the validation

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

推荐答案

尝试以下代码，并在ajax代码中进行一些更改.在代码中添加以下参数.

Try below code and make few changes in ajax code. Add below parameters in your code.

processData: false,
contentType: false,

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

And add var formData = new FormData($("#formID")[0]); line before ajax starts.

您应使用FormData使用ajax上载文件. $(form).serialize()将只给您键和值.您可以使用以下代码通过AJAX上传文件.

You should use FormData for uploading files using ajax. $(form).serialize() will give you just key and value. You can use below code for uploading files using AJAX.

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

    success: function (response) {

    }
});

这篇关于输入类型文件未在jquery ajax中序列化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！