在没有点击提交表单的情况下上传图片后页面是否刷新？

Question

When I upload a image in a form, the Image uploads but the page refreshed. I don't want that page to be refreshed for uploading an image. This is the image save button code:

$('#app-icon-btn').click(function () {
    var oFile = $('#avatarInput')[0].files[0];
    var rFilter = /^(image\/jpeg|image\/png)$/i;
    if(typeof(oFile) == "undefined"){
        swal('Please select a valid image file (jpg and png are allowed)');
        return false;
    }

    var data_from = $('#data-from').serialize();
    if($('#app-icon-modal-btn').siblings().children('img').length){

    }


    <?php
    if(isset($appdata) && intval($appdata['is_update']) == 5){ ?>
            var is_image = 6;
    <?php }else{?>
        var is_image = 1;
    <?php }?>
    $.post(HTTP_ROOT + "/apps/updatefireTvApp", {'is_ajax': 1,'is_image': is_image , 'data_from': data_from}, function (res) {

        if (res) {
            //alert(res);
            $('#app-icon-from').submit();
        }

    });
});

Answer 1

If you don't want the page to refresh (ie. submit the form), you need to prevent the form from doing so:

// Inject the event ---------------v
$('#app-icon-btn').click(function (e) {
    // Prevent the event from doing what it normally does
    e.preventDefault();
    //...continue with script

This will allow your ajax to take over and submit the form instead.