js提交form数据的时候如果要包含file数据要用到FormData对象

通过创建一个FormData对象并将表单元素(包括文件输入)附加到该对象,您应该能够成功地将文件作为$_FILES数组的一部分发送到后端。

jQuery中的serialize()方法不包括文件输入,因为出于安全和技术考虑,文件上传需要特殊处理。文件输入包含二进制数据(文件本身),这些数据不能以与文本字段或其他表单元素相同的方式序列化。

要在使用AJAX提交表单时包含文件输入字段,您需要使用FormData对象,如我之前的响应中修改的JavaScript代码所示。这允许您收集包括文件在内的所有表单数据,并将其正确发送到服务器。

因此,当您使用serialize()时,它会排除文件输入,并且您应该使用FormData来处理AJAX请求中的文件上载。

用formData对象的时候ajax里面一定要传递contentType: false, processData: false, 否则提示的是illegal invocation 非法调用错误

$(document).ready(function() {
    $('#bookForm').submit(function(e) {
        e.preventDefault();

        if (this.checkValidity()) {
            const formData = new FormData(this);
            formData.append('action', 'handle_book_ajax');
            formData.append('param', 'create-book');

            $.ajax({
                type: 'POST',
                url: book_rest.ajax_url,
                data: formData,
                contentType: false,
                processData: false,
                success: function(res) {
                    console.log(res);
                    try {
                        const data = JSON.parse(res);
                        console.log("+success");

                        if (data.status) {
                            swal({
                                title: "Good Job",
                                text: data.message,
                                icon: "success"
                            }).then(() => {
                                $('#bookForm')[0].reset();
                            });
                        } else {
                            swal({
                                title: "Failed",
                                text: data.message,
                                icon: "error"
                            });
                        }
                    } catch (e) {
                        swal({
                            title: "Error",
                            text: '数据查询格式错误',
                            icon: 'error'
                        });
                    }
                },
                error: function(err) {
                    console.log(err);
                }
            });
        } else {
            console.log('Form has not been confirmed');
            swal({
                title: "Error",
                text: '请填写必要的表格字段',
                icon: 'error'
            });
        }
    });
});

Check Also

获取input的keyup或者input状态只获取一次值避免无限重复值

$(document).rea …

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注