回调唯一的文件名与jquery php - Callback unique filename with jquery php

Callback unique filename with jquery php

本文关键字：jquery php 文件名唯一回调 | 更新日期: 2023-09-27

我使用html2canvas和Canvas2Image从canvas创建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);
?>

提前感谢您的帮助。

您可以通过在PHP中返回它并在AJAX中使用succes方法捕获它来获得文件名。

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); 
    }
});

您可以简单地返回数组内部的文件名，并使用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);
   });