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

Question

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

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

Answer 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();
});