通过jQuery AJAX提交表单的问题

时间:2014-04-27 13:53:46

标签: jquery

我编写了一个jQuery脚本,用于检查文件输入字段上的change事件,当选择文件时,需要触发表单提交函数并通过Ajax发布数据。

问题: 正在触发文件更改功能,但未触发提交功能。控制台没有错误显示。

我写过的剧本:

$(document).ready(function() {
    $("#upld").on('change', function() {
        console.log('going to run submit function');
        $('#fff').submit(function(e) {
            console.log('submitting function executed')
            var siteSettings = {"ajaxurl": '/filer/check/wp-admin/admin-ajax.php'};
            var data = {
                action: 'uploading-new-image',
                files: $(this).serialize()
            };

            jQuery.post(
                    siteSettings.ajaxurl,
                    data,
                    function(response) {
                        $("#error").html(response);
                    });

            e.preventDefault();

        });

    });
});

这是HTML:

<form id="fff" method="POST" action="process.php" enctype="multipart/form-data">
    <input type="file" name="filetoupload" id="upld" />
</form>

View on JSFIDDLE

1 个答案:

答案 0 :(得分:3)

你没有触发它。您只是为提交处理程序添加处理程序。

.submit().trigger('submit')添加到代码中。

$(document).ready(function () {
    $("#upld").on('change', function () {
        console.log('going to run submit function');
        $('#fff').submit(function (e) {
            console.log('submitting function executed')
            var siteSettings = {
                "ajaxurl": '/filer/check/wp-admin/admin-ajax.php'
            };
            var data = {
                action: 'uploading-new-image',
                files: $(this).serialize()
            };

            jQuery.post(
            siteSettings.ajaxurl,
            data,

            function (response) {
                $("#error").html(response);
            });

            e.preventDefault();

        }).submit();  //  <-------- Added submit here.
    });
});