Обновление данных обрезанного изображения в mySQLi с помощью jQuery & Ajax

Question

У меня есть форма (которая появляется в модальном режиме), где вы можете загрузить изображение и изменить его размер. Есть две кнопки «Отмена» и «Сохранить и обрезать». При нажатии Save & Crop у меня появляется следующий jQuery в functions.js:

/* handle functionality when click crop button  */
jQuery('#save_crop').on('click', function(e){
    e.preventDefault();
    params = {
        targetUrl: 'change_pic.php?action=save',
        action: 'save',
        x_axis: jQuery('#hdn-x1-axis').val(),
        y_axis: jQuery('#hdn-y1-axis').val(),
        x2_axis: jQuery('#hdn-x2-axis').val(),
        y2_axis: jQuery('#hdn-y2-axis').val(),
        thumb_width: jQuery('#hdn-thumb-width').val(),
        thumb_height:jQuery('#hdn-thumb-height').val()
    };
    saveCropImage(params);
});


/* Function to save crop images */
function saveCropImage(params) {
    jQuery.ajax({
        url: params['targetUrl'],
        cache: false,
        dataType: "html",
        data: {
            action: params['action'],
            id: jQuery('#hdn-profile-id').val(),
            t: 'ajax',
            w1: params['thumb_width'],
            x1: params['x_axis'],
            h1: params['thumb_height'],
            y1: params['y_axis'],
            x2: params['x2_axis'],
            y2: params['y2_axis'],
            image_name: jQuery('#image_name').val()
        },
        type: 'Post',
        success: function (response) {
            jQuery('#change_pic_modal').modal('hide');
            jQuery(".imgareaselect-border1,.imgareaselect-border2,.imgareaselect-border3,.imgareaselect-border4,.imgareaselect-border2,.imgareaselect-outer").css('display', 'none');
            jQuery("#profile_picture").attr('src', response);
            jQuery("#preview-profile-pic").html('');
            jQuery("#profile-pic").val();
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert('status Code:' + xhr.status + 'Error Message :' + thrownError);
        }
    });
}

});

на change_pic.php У меня есть следующее:

Первый оператор switch:

/* Get post details */
$post = isset($_POST) ? $_POST: array();
switch($post['action']) {
    case 'save' :
        saveProfilePic();
        saveProfilePicTmp();
        break;
    default:
        changeProfilePic();
}

С учетом вышеизложенного у меня теперь есть case 'save':. Затем активируются saveProfilePic() и saveProfilePicTmp(). Последний работает нормально, изображение сохраняется в правильную папку с санированным именем. Другой saveProfilePic() ничего не делает, и я не понимаю, почему? Вот функция:

    /* Function to handle save profile pic */
function saveProfilePic(){
    include_once("config/config.php");
    $post = isset($_POST) ? $_POST: array();    
    //Handle profile picture update with MySQL update Query using $options array    
    if($post['username-id']){
        $sql_query = "SELECT * FROM users WHERE username = '".mysqli_escape_string($con, $post['username-id'])."'";     
        $resultset = mysqli_query($con, $sql_query) or die("database error:". mysqli_error($con));      
        if(mysqli_num_rows($resultset)) {                     
            $sql_update = "UPDATE users set profile_pic='".mysqli_escape_string($con,$post['image_name'])."' WHERE username = '".mysqli_escape_string($con, $post['username-id'])."'";          
            mysqli_query($con, $sql_update) or die("database error:". mysqli_error($con));
        }
    }
}

($post['username-id']) исходит из формы как скрытое значение, и мне нужно это привязать к конкретному пользователю. Кто-нибудь может понять, почему это не сработает? В основном то, что происходит с моей формой, это то, что модал остается открытым, а область обрезанного изображения исчезает. Предполагается, что модальный режим закрывается, но, оставаясь открытым, я предполагаю, что b / c saveProfilePic(); не выполняется.

Любая помощь будет принята с благодарностью.

Answer 1

Вы говорите:

($ post ['username-id']) исходит из формы как скрытое значение

Но вы никуда не отправляете это в своем Ajax (ну, в любом случае, не помечены как username-id). Ваш data объект должен включать это, или вы должны иметь его в сеансе:

data: {
    // Presumably  vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv is the id?
    'username-id': jQuery('#hdn-profile-id').val(),
    action: params['action'],
    // If the above is a correct assumption, then you don't need this (or
    // just revise this key name from "id" to "username-id" like
    // I demonstrated)
    id: jQuery('#hdn-profile-id').val(),
    t: 'ajax',
    w1:params['thumb_width'],
    x1:params['x_axis'],
    h1:params['thumb_height'],
    y1:params['y_axis'],
    x2:params['x2_axis'],
    y2:params['y2_axis'],
    image_name :jQuery('#image_name').val()
},

Если вы не хотите изменять вышеприведенное data, измените PHP так, чтобы искать id, а не username-id:

function saveProfilePic()
{
    # I would not do this, I would put the connection at the top of the page and
    # inject the $con into the function saveProfilePic($con)
    include_once("config/config.php");
    # I would check for !empty(), not isset() because it could be set, just empty
    $post = (!empty($_POST))? $_POST : array();    
    # Check for just id here not username-id
    if(!empty($post['id'])) {
        # You should be binding parameters, forget using the escaping stuff...
        $username_id = mysqli_escape_string($con, $post['id']);
        $sql_query = "SELECT * FROM users WHERE username = '".$username_id."'";     
        $resultset = mysqli_query($con, $sql_query) or die("database error:". mysqli_error($con));
        if(mysqli_num_rows($resultset)) {
            # Again, bind parameters here, don't escape anymore
            $sql_update = "UPDATE users set profile_pic='".mysqli_escape_string($con,$post['image_name'])."' WHERE username = '".$username_id."'";          
            mysqli_query($con, $sql_update) or die("database error:". mysqli_error($con));
        }
    }
}