Question

我有一个页面，可以上传图像并裁剪它（为此我使用了this plugin），然后将此裁剪的结果保存在服务器中。

在查看文档后，我尝试了这个：

JQUERY

var zis = //some div where i uploaded the image;
$('.export').click(function() {
    var imageData = $('.image-editor').cropit('export');
    zis.find('#img_val').val(imageData);
    zis.find('.salvaImmagine').click();
});

PHP

public function immagine_profilo(){
    if (isset($_POST['crop'])){

        var_dump($_POST['img_val']);
        // Get the base-64 string from data
        $filteredData = substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);

        // Decode the string
        $unencodedData = base64_decode($filteredData);

        // image new name
        $newfilename = 'images/immProf' . $_SESSION['auth'] . '.png';
        file_put_contents($newfilename, $unencodedData);

        // saves the path into a database
        $query = "UPDATE users SET pic = '{$newfilename}' 
                    WHERE id = {$_SESSION['auth']}";
        $result = mysqli_query($_SESSION['connessione'], $query);
        return // function to retrive the image;
    }
}

到目前为止一直很好，图像保存在服务器中，其路径也保存，只剩下一个问题：需要重新加载页面以查看图像更改，确定我们可以做得更好：更新图像没有页面重新加载。

所以我在网上搜索了关于ajax的信息，经过一段时间我得出了这个：

JQUERY

$('.export').click(function() {

    var imageData = $('.image-editor').cropit('export');
    zis.find('#img_val').val(imageData);

    lightbox(false);

    zis.find('.salvaImmagine').click();
});
$('.salvaImmagine').on('click', function(event) {
    event.preventDefault();
    var imageData = $('.cop').cropit('export');
    $.ajax({
        url: 'lib/ottieniCose.php',
        type: 'POST',
        dataType: 'html',
        data: {
            crop: 'Salva',
            crop_cop: 'Salva',
            img_val: imageData
        },
    })
    .done(function(response) {
        console.log("success");
        $(".copertina").css('background-image', 'url(' + response + ')');
    })
    .fail(function() {
        console.log("error");
    })
});

PHP（lib / ottieniCose.php）

//rquire bla bla bla
if (isset($_POST['crop']) || isset($_POST['crop_cop'])) {
    var_dump("test");
    //calls the function to save the image
    $login->immagine_profilo();
}

现在，我绝对没有结果，图片没有保存，路径没有保存，似乎根本没有调用php页面（虽然没有404错误）但是图像正在存在裁剪，我知道通过查看代码。

我也尝试将POST方法更改为ajax中的GET方法，但是我得到错误414，有什么帮助吗？

HTML

<div id="lightbox">
    <div class="image-editor">
        <div class="scegliImm">
            <p>Scegli un'imagine</p>
        </div>
        <input type="file" class="cropit-image-input">
        <div class="cropit-image-preview-container">
            <div class="cropit-image-preview" style="background-image: url(<?php print $login->get_profile_pic() ?>)"></div>
        </div>
        <div class="image-size-label">
            <p>Nessuna immagine selzionata,<br> seleziona un'immagine.<br>P.S. Puoi trascinare l'immagine<br> nuova sopra quella vecchia</p>
            <div class="esci">
                <p>Esci</p>
            </div>
        </div>
        <div class="neh">
            <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
                <div>
                    <input type="hidden" name="img_val" id="img_val" value="">
                    <input type="submit" name="crop" value="Salva" class="salvaImmagine">
                </div>
            </form>
            <div id="salvaImma">
                <input type="range" class="cropit-image-zoom-input">
                <button class="export">Salva</button>
            </div>
        </div>
    </div>
</div>

Answer 1

尝试给出ajax调用的绝对路径，或者如果你的网站根目录下的lib文件夹在lib之前使用反斜杠

so your url will  be :- /lib/ottieniCose.php

它可能对你有帮助。

用ajax无法访问php文件

1 个答案: