Killua Killua - 22 days ago 13
Ajax Question

Input type file not getting serialized in jquery ajax

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


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

Answer Source

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

processData: false, contentType: false,

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

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) {

    }
});