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

Here is my form

这是我的表格

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

Here is my jquery event

这是我的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() {
        }
    })
})
})

But the change event is not triggering form submit so I tried trigger('submit') but the page is refreshing instead of submitting in ajax.

但是更改事件不会触发表单提交,所以我尝试触发('submit')但页面刷新而不是在ajax中提交。

3 个解决方案

#1

You are binding the events incorrectly. As you currently have it, changing the field will trigger the binding of the submit. It need to be like this:

您正确绑定事件。正如您目前所拥有的那样,更改字段将触发提交的绑定。它必须是这样的:

// 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

A simple modification works

一个简单的修改工作

$("#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

you should try this code:

你应该尝试这个代码:

$("#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() {}
    })
});

because i expect the ".change()" will be fired one time in the first change.

因为我希望“。change()”在第一次更改时会被触发一次。

#1