Question

我正在尝试在更改时提交表单，如果他们选择了一个文件，但是当我提交它时，它不会为我的ajax运行函数回调;;

$(function(){

    $("#page_photo").on("change", function() {

        alert("1st stage"); 

        $('#image_upload').trigger("submit", function(){

        alert("2nd stage");

            var formData = new FormData($(this)[0]);

            $.ajax({
                url: '<?php echo Config::get('URL'); ?>image/upload_user_photo',
                type: 'POST',
                data: formData,
                async: false,
                success: function (data) {
                    if(!data.success){
                        $.notify(data.error, "error");
                    }else{
                        $.notify(data.success, "success");
                    }
                },
                cache: false,
                contentType: false,
                processData: false
            });

            return false;
        }); 
    });
});

我不希望用户在提交之前按下提交按钮，只是在他们选择文件时，所以.submit不会为此而烦恼

Answer 1

我建议如下。如何准确获取上传的文件取决于您的HTML，但如果您可以正确获取数据，则无需触发提交，只要发生更改，您就可以启动AJAX调用。

$(function(){

    $("#page_photo").on("change", function() {

        alert("1st stage"); 
        //BELOW MIGHT NEED TO BE CHANGED TO CORRECTLY GET THE IMAGE
        var formData = new FormData($('#image_upload')[0]);

        $.ajax({
            url: '<?php echo Config::get('URL'); ?>image/upload_user_photo',
            type: 'POST',
            data: formData,
            async: false,
            success: function (data) {
                if(!data.success){
                    $.notify(data.error, "error");
                }else{
                   $.notify(data.success, "success");
                }
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });
});

Answer 2

您应该使用以下语法绑定提交回调：

$('#image_upload').bind("submit", function(){
    alert("2nd stage");
});

然后使用以下代码触发submit事件：

$('#image_upload').trigger("submit");

如何使用函数回调提交更改表单

2 个答案: