Показать изображение, которое я только что загрузил на сервер через ajax

Question

Моя конечная цель - показать элемент canvas, который я загрузил на сервер через ajax. Я могу загрузить изображение, но не могу отобразить то же самое изображение, которое я загрузил,

проблема в том, что изображение сохраняется как name_file.png, и это нормально, но мне нужен способ, чтобы отобразить это изображение на странице

это может быть простой вопрос для эксперта WP. Спасибо

JS код

jQuery("#testbut").click(function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();

var canvas = document.getElementById('bearup');
var dataURL = canvas.toDataURL();
jQuery.ajax({
type: "POST",
url: the_ajax_script.ajaxurl,
data: {
action: 'save_image_canvas',
imgBase64: dataURL,
post_id: '<?php global $post; echo $post->ID; ?>',
}
}).done(function(o) {
console.log('saved');

});
});

add_action( 'wp_ajax_save_image_canvas', 'save_image_canvas' );

function save_image_canvas(){
$img = $_POST['imgBase64'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$fileData = base64_decode($img);

//saving
$attachment = wp_upload_bits( 'name_file.png', null, $fileData );

$filetype = wp_check_filetype( basename( $attachment['file'] ), null );

$postinfo = array(
'post_mime_type'    => $filetype['type'],
'post_title'    => 'Canvas uploaded image',
'post_content'  => '',
'post_status'   => 'inherit',
);
$filename = $attachment['file'];
$attach_id = wp_insert_attachment( $postinfo, $filename, $postid );

set_post_thumbnail( $_POST["post_id"], $attach_id );
}

Answer 1

Возвращает путь к загруженному файлу в качестве ответа, когда вы отправляете Ajax-запрос.

<?php 
function save_image_canvas(){
-- Existing code ---


//Return the uploaded file path as ajax response.
if($attach_id){
    $feat_image_url = wp_get_attachment_url(  $attach_id  );
    echo "<img src='$feat_image_url' id='file_upload'>";
    die();
}

}
?>

После успешного выполнения Ajax-запроса получите путь к файлу в качестве ответа и отобразите в нужном месте.

jQuery.ajax({
    --- Existing code --
}
}).done(function(data) {
    console.log(data);
    $('.image').html(data);
}

<div class="image"></div>