Retrieving a picture from php script (mysql) on server using jquery ajax call

Question

I am trying to pull a picture from my server (which has pictures stored in a mysql db). I am not getting a picture back correctly when I attempt to get to call it however? Here is how I attempt to set up the php server response...

if(mysql_query("insert into Personal_Photos (Email, Pics) values('$email', '$data')"))
            {
                $query="select Pics, MAX(ID) from Personal_Photos where Email='$email'";
                $result=mysql_query($query) or die("Error: ".mysql_error());
                $row=mysql_fetch_array($result);
                //$mime = 'image/yourtype';
                //$base64 = base64_encode($contents);
                //$uri = "data:$mime;base64,$base64";
                header("Content-type: image/jpg");
                print($row['Pics']);
            }

Here is the jquery Form call that attempts to get this picture...

$('#profilepicbutton').live('change', function(){
    $("#preview").html('');
    $("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
        $("#registerpt3").ajaxForm({
                target: '#preview',
                success: function(data)
                {                                   
                    $("#preview").html('');
                    $("#preview").append("<img src="+data+"></img>");
                }
            }).submit();
 });

UPDATE: GETTING WEIRD RESULT Getting a weird result when I change my php code to this

    if(mysql_query("insert into Personal_Photos (Email, Pics) values('$email', '$data')"))
            {
                $query="select Pics, MAX(ID) from Personal_Photos where Email='$email'";
                $result=mysql_query($query) or die("Error: ".mysql_error());
                $row=mysql_fetch_array($result);
                //$mime = 'image/yourtype';
                //$base64 = base64_encode($contents);
                //$uri = "data:$mime;base64,$base64";
                //header("Content-type: image/jpg");
                echo '<img src="data:image/jpeg;base64'.base64_encode($row['Pics']).'"/>';
            }

gilly3 · Accepted Answer · 2011-10-05 23:47:53Z

1

An image must be loaded from a url using a "GET" request. (Ok, not always - you can use data urls, but it can be buggy and browser support is an issue). So, if you can get your php page using a "GET" request rather than "POST", this is no problem. Use .serialize() to create your querystring, and assign the url to your image's src:

$('#profilepicbutton').live('change', function() {
    $("#preview").html('');
    $("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
    var form = $("#registerpt3");
    var page = form.attr("action");
    var qs = form.serialize();
    var url = page + "?" + qs;
    $("<img>").load(function() {
        $("#preview").empty().append(this);
    }).attr("src", url);
});

answered Oct 5, 2011 at 23:47

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Retrieving a picture from php script (mysql) on server using jquery ajax call

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related