Upload Image Using Ajax and PHP and Return Uploaded Image URL

Question

I am trying to upload image without refresh but i don't have much knowledge about ajax. I have php file thy return image url when i submit post with ajax function.

Javascript

 $(document).ready(function() { 

        $('#photoimg').live('change', function()            { 
                   $("#preview").html('');
            $("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
        $("#imageform").ajaxForm({
                    target: '#preview'
                                       }
    }).submit();

        });
    }); 

PHP

  <?php

       $path = "uploads/";

$valid_formats = array("jpg", "png", "gif", "bmp");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
    {
        $name = $_FILES['photoimg']['name'];
        $size = $_FILES['photoimg']['size'];

        if(strlen($name))
            {
                list($txt, $ext) = explode(".", $name);
                if(in_array($ext,$valid_formats))
                {
                if($size<(1024*1024))
                    {
                        $actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
                        $tmp = $_FILES['photoimg']['tmp_name'];
                        if(move_uploaded_file($tmp, $path.$actual_image_name))
                            {


                                $imge1="uploads/".$actual_image_name;
                                echo $imge1;

                            }
                        else
                            echo "failed";
                    }
                    else
                    echo "Image file size max 1 MB";                    
                    }
                    else
                    echo "Invalid file format..";   
            }

        else
            echo "Please select image..!";

        exit;
    }
        ?>

HTML

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload your image <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>

</div>
<img src = "" id="thumb_img" />

Now result is image url. when image select ajax automatically post sand to php.Php save image and return url and this url show in target div.So now i need this url set as background url. Like image select target div background change.

Answer 1

I would just do something like:

$('#myForm').ajaxForm(function(url) { 
   $('#preview').css('background-image', "url(" + url + ")"); 
});