回調唯一的文件名與jQuery PHP

Question

我使用html2canvas和Canvas2Image創建從畫布PNG圖像，並將其與唯一的文件名保存到服務器。

我想知道如何檢索和顯示唯一的文件名就被產生之後。

jQuery的

$(function() { 
       $("#convertcanvas").click(function() { 
        html2canvas($("#mycanvas"), { 
         onrendered: function(canvas) { 
         theCanvas = canvas; 
         document.body.appendChild(canvas); 

         // Convert for sharing   

       var img = canvas.toDataURL("image/png",1.0); 
       $.ajax({ 
        url:'save.php', 
        type:'POST', 
        data:{ 
          data:img 
         } 
       }); 

PHP

<?php 
    $data = $_POST['data']; 
    $data = substr($data,strpos($data,",")+1); 
    $data = base64_decode($data); 
    $file = 'images/myfile'.md5(uniqid()).'.png'; 
    file_put_contents($file, $data); 
?> 

預先感謝任何幫助。

Answer 1

你可以在你的PHP返回它，用succes方法捕獲它的AJAX獲得的文件名。

PHP

<?php 
    $data = $_POST['data']; 
    $data = substr($data,strpos($data,",")+1); 
    $data = base64_decode($data); 
    $filename = 'myfile'.md5(uniqid()).'.png'; // <-- Added this because you probably don't want to return the image folder. 
    $path = 'images/'.$filename; 
    file_put_contents($path, $data); 
    echo $filename; // <-- echo your new filename! 
?> 

jQuery的

$.ajax({ 
    url:'save.php', 
    type:'POST', 
    data:{ 
     data:img 
    }, 
    success: function(data) { 
     alert(data); // <-- here is your filename 
     handleData(data); 
    } 
}); 

Answer 2

你可以簡單地給後面的文件名數組的內部，並與json_encode返回它的JSON。

PHP

<?php 
    $data = $_POST['data']; 
    $data = substr($data,strpos($data,",")+1); 
    $data = base64_decode($data); 
    $file = 'images/myfile'.md5(uniqid()).'.png'; 
    file_put_contents($file, $data); 
    echo json_encode(array('filename' => $file)); 
?> 

而在你的腳本，你可以指定通過設置 '的dataType' 屬性 「JSON」 期待JSON數據。然後你可以使用中，.done（）函數來完成你想要返回的數據任何東西，例如控制檯日誌吧：

jQuery的

var img = canvas.toDataURL("image/png",1.0); 
    $.ajax({ 
     url:'save.php', 
     type:'POST', 
     dataType: 'json', 
     data:{ 
      data:img 
     } 
    }).done(function(data){ 
     console.log(data); 
    });