如何从ajax成功函数中显示图像?

时间:2015-06-05 06:19:13

标签: javascript php jquery ajax

我已经创建了这样的ajax函数......在这里我将从运行时获取值,我需要根据该值返回照片。在成功函数中,我需要在特定div中显示该图像

var num=document.getElementById('number').value;
$.ajax({
    url:"image.php?val="+num,
    contentType: "image/png",
    success:function(img)
    {
        $('#image').html('<img src="data:image/png;base64,' + img + '" />');
    }
    });

image.php页面

$sql_sub = select_query("select pic from  photo  where picnum=".$_GET['val']."");
$img = $sql_sub[0][0]->load();
header("Content-type: image/png");
ob_start();
imagepng($img);
echo "data:image/png;base64,", base64_encode(ob_get_clean());

3 个答案:

答案 0 :(得分:3)

它看起来很完美。你可能在标签中有问题。首先检查该标签。但.append效果很好。

你试过这个:

$('body').append('<img src="https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=http%3a%2f%2fwww.facebook.com" />');

$('#div_where_you_will_sho_qr_code').append(data.toString());

或:

$('#container').html('<img src="https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=http%3a%2f%2fwww.facebook.com" />');

其中#container是隐藏图像的DOM元素。

或我喜欢的方式:

$('#container').html(
    $('<img/>', {
        src: 'https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=http%3a%2f%2fwww.facebook.com',
        alt: ''
    })
);

答案 1 :(得分:1)

var num=document.getElementById('number').value;
$.ajax({
    url:"image.php?val="+num,
     type: "POST",
     dataType: "html",
    success:function(data)
    {
        $('#image').html(data));
    }
    });

image.php

$sql_sub = select_query("select pic from  photo  where picnum=".$_POST'val']."");
$img    = $sql_sub[0][0]->load();
$image  = '<img src="data:image/png;base64,'.$img.'" />';
echo $img;

答案 2 :(得分:0)

var num=document.getElementById('number').value;
$.ajax({
url:"image.php?val="+num,
 type: "POST",
 dataType: "html",
success:function(img)
{
    $('#image').html('<img src="data:image/png;base64,' + img  + '" />');
}
});

image.php

$sql_sub = select_query("select pic from photo where picnum=".$_GET['val']."");
$img = $sql_sub[0][0]->load();
header("Content-type: image/png");
ob_start();
echo $img;
echo "data:image/png;base64,", base64_encode(ob_get_clean());