2015-03-26 2 views
2

Я хочу, чтобы загрузить изображение, когда пользователь нажимает на кнопку (# myid.save) .Below мой код:Загрузить изображение с помощью Ajax и PHP

HTML код:

<canvas id="cnv" width="500" height="100"></canvas> 
<input id="myid_save" type="submit">Save</input> 

JavaScript код :

$('#myid_save').on('click', function(e) {   
    e.preventDefault(); 
    saveViaAJAX();   
}); 

function saveViaAJAX() 
{ 
    var testCanvas = document.getElementById("cnv"); 
    var canvasData = testCanvas.toDataURL("image/png"); 
    //var postData = "canvasData="+canvasData; 

    $.ajax({ 
     type: "POST", 
     url: "testSave.php", 
     data: { 
     imgBase64: canvasData 
     } 
    }).done(function(o) { 
     console.log('saved');     
    }); 
} 

testSave.php Файл:

<?php 

    define('UPLOAD_DIR', 'C:\xampp\htdocs\drupal-7.34\sites\all\modules\myid\uploads\id_signature'); 
    $img = $_POST['imgBase64']; 
    $img = str_replace('data:image/png;base64,', '', $img); 
    $img = str_replace(' ', '+', $img); 
    $data = base64_decode($img); 
    $file = UPLOAD_DIR . '\sample.png'; 
    $success = file_put_contents($file, $data); 
    print $success ? $file : 'Unable to save the file.'; 
?> 

Моя консоль говорит «сохранена», но на моем сервере нет изображения. Где мне не хватает?

+1

Конечно, ваша консоль говорит «сохранена», потому что сам запрос AJAX успешный ... у вас есть PHP-скрипт, который возвращает либо имя файла, либо сообщение об ошибке, так почему бы вам не проверить вывод этого скрипта путем ведения журнала значение 'o' в вашем обработчике' done' для консоли? (Это, вероятно, просто скажет вам, что что-то пошло не так, но может также показать сообщение об ошибке PHP.) – CBroe

ответ

0

testSave.php ссылки $_POST['canvasData'], но JS отправляет предназначенную переменную как imgBase64. Вместо этой строки следует указать $img = $_POST['imgBase64'], чтобы соответствовать AJAX.

+0

Спасибо за исправление меня, но даже если я уже изменил код, он все равно не работает. –

Смежные вопросы