Jquery Form plugin picture retrieve

Question

I am using the Jquery Form plugging to try and upload a picture to my mysql DBMS. I use the JqueryForm ajaxForm() call to do this. It calls a php file on my server and that script puts the file into the database. I then attempt to get that file out of the database in the same script. I guess the nuts and bolts of how I do it is irrelevant. I really want to know how I would get a picture back from an ajax call using the AjaxForm call from the jqueryForm pluggin. Does anybody have an example of how to do this using that pluggin? I am a little lost...

<script type="text/javascript" src="jquery.form.js"></script>
<script>
    $(document).ready(function () {
        $('#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();
        });
    });
</script>    

Now, On the jquery form pluggin site, there is a page in particular that has instructions for file uploads...
http://jquery.malsup.com/form/#file-upload The example that they give is a little blank...

<textarea> 
for (var i=0; i < 10; i++) { 
    // do some processing 
} 
</textarea>

Now, what am I supposed to do with that? Why am I looping through some data structure? If you look on there page, you will see they are remarkable brief in their instructions of what to do. Anybody have any tutorials or advice? Thanks.

UPDATE PHP Code

if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{   
$name = $_FILES['profilepicinput']['name'];
$size = $_FILES['profilepicinput']['size'];
if(strlen($name))
{
    list($txt, $ext) = explode(".", $name);
    if(in_array($ext,$valid_formats))
    {
        if($size<(1024*1024)) // Image size max 1 MB
        {
            $actual_image_name = time().$session_id.".".$ext;
            $tmp = $_FILES['profilepicinput']['tmp_name'];
            $fp      = fopen($tmp, 'r');
            $data = fread($fp, filesize($tmp));
            $data = addslashes($data);
            fclose($fp);
             values('$email', '$tmp')");

            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']);
            }
            else
            {
                die('Invalid query: ' . mysql_error());
                echo "failed";
            }
        }
        else
            echo "Image file size max 1 MB. Image Size:"+$size;
    }
    else
        echo "Invalid file format..";
}
else
    echo "Please select image..! Bull shit".$email;
exit;

}

Answer 1

If I understand your question right, you can create a so called data URI.

In PHP it's quite simple:

$mime = 'image/yourtype';
$base64 = base64_encode($contents);
$uri = "data:$mime;base64,$base64";

And pass this as string in the ajax reponse to be directly entered as you outlined in your question.

Hopefully this helps, I'm not fluent with jqueryform.