jquery更改事件以使用ajax提交表单答案

【问题标题】：jquery change event to submit form using ajaxjquery更改事件以使用ajax提交表单
【发布时间】：2014-02-06 01:22:36
【问题描述】：

这是我的表格

<form name="uploadImg" id="uploadImg" class="profile-image" enctype="multipart/form-data">
        <input type="file" name="profile" id="updProfileImg">
</form>

这是我的 jquery 事件

$("#updProfileImg:file").change(function() {
    $('#uploadImg').submit(function() {
    var queryString = new FormData($('form')[0]);
    $.ajax({
        type: "POST",
        url: 'index.php?route=account/edit/upload',
        data: queryString,
        contentType: false,
        processData: false,
        beforeSend: function() {
        },
        success: function() {
        }
    })
})
})

但是更改事件没有触发表单提交，所以我尝试了trigger('submit')，但页面正在刷新而不是在 ajax 中提交。

【问题讨论】：

尝试切换返回功能？

标签： php jquery ajax forms

【解决方案1】：

您错误地绑定了事件。正如您目前拥有的那样，更改字段将触发提交的绑定。应该是这样的：

// bind the submit event
$('#uploadImg').submit(function() {
    var queryString = new FormData($('form')[0]);
    $.ajax({
        type: "POST",
        url: 'index.php?route=account/edit/upload',
        data: queryString,
        contentType: false,
        processData: false,
        beforeSend: function() {
        },
        success: function() {
        }
    });
});

// bind the change event to trigger a submit
$("#updProfileImg:file").change(function() {
    $("#uploadImg").submit();
});

【讨论】：

【解决方案2】：

一个简单的修改就可以了

$("#updProfileImg:file").change(function() {
        //$('#uploadImg').submit(function() {
            var queryString = new FormData($('#uploadImg')[0]);
            $.ajax({
                type: "POST",
                url: 'index.php?route=account/edit/upload',
                data: queryString,
                contentType: false,
                processData: false,
                beforeSend: function() {

                },
                success: function() {

                }
            })
        //})
    })

【讨论】：

【解决方案3】：

你应该试试这个代码：

$("#updProfileImg:file").on("change", function(){
    var queryString = new FormData($('#uploadImg')[0]);
    $.ajax({
        type: "POST",
        url: 'index.php?route=account/edit/upload',
        data: queryString,
        contentType: false,
        processData: false,
        beforeSend: function() {},
        success: function() {}
    })
});

因为我预计“.change()”将在第一次更改中被触发一次。

【讨论】：