Jquery ajax表单提交包含文件

不幸的是,jQuery serialize()方法不包含输入文件元素.因此,您的文件不会包含在序列化值中.

你应该做的是创建一个FormData对象,将文件附加到该对象.您还需要将表单字段值附加到此相同的FormData对象.您可以简单地遍历所有输入字段并添加它.此外,在ajax调用中,您需要指定processData和contentType属性值false.

$(document).on('click', 'input[type="submit"].genericSubmit', function(e) {

    e.preventDefault(); // prevent the default submit behavior.

    var fdata = new FormData();

    $('input[name="fileUpload"]').each(function(a, b) {
        var fileInput = $('input[name="fileUpload"]')[a];
        if (fileInput.files.length > 0) {
            var file = fileInput.files[0];
            fdata.append("fileUpload", file);
        }
    });

    // You can update the jquery selector to use a css class if you want
    $("input[type='text'").each(function(x, y) {
        fdata.append($(y).attr("name"), $(y).val());
    });

    var frmUrl = $('.genericForm').attr('action');
    $.ajax({
        type: 'post',
        url: frmUrl,
        data: fdata,
        processData: false,
        contentType: false,
        success: function(e) {
            $('#target').html(e);
        }
    });

});