I have created ajax function like this...In this I will get the value from run time and i need to return the photo according to that value..In success function i need to display that image in particulat 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 page

$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());

I have created ajax function like this...In this I will get the value from run time and i need to return the photo according to that value..In success function i need to display that image in particulat 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 page

$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());

• javascript
• php
• jquery
• ajax

• Looks about right. You'll need to base64 encode the image data using: btoa() – rrowland Commented Jun 5, 2015 at 6:24
• looks fine. Did u get any error while debugging. – Venu Commented Jun 5, 2015 at 6:28
• have updated like this..Its just displaying the image tag – Pravin Commented Jun 5, 2015 at 6:44
• contentType: "image/png", — you aren't POSTing an image to the server. Don't claim that you are. – Quentin Commented Jun 5, 2015 at 6:47
• 1 Danger: You are vulnerable to SQL injection attacks that you need to defend yourself from. – Quentin Commented Jun 5, 2015 at 6:47

3 Answers 3

It looks perfect..You may have an issue in tag. Check first that tag. However .append works great.

Have you tried this:

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

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

or:

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

where #container is some DOM element to harbor your image.

or the way I prefer:

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

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;

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