1
我有一個頁面,可以上傳圖像並剪裁圖像(這樣做我使用了this plugin),然後將此剪裁的結果保存在服務器中。無法使用ajax到達php文件
看文檔後,我想這:
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>
沒有幫助,沒有改變 – user3847141
你能給我從您的網站根目錄lib文件夾的路徑嗎? –
我目前在本地工作所以根(localhost)/ lib/ – user3847141