Question

i have simple form that uploads image to server and returns php string containing image adress (and/or aditional html code). It is done with JqueryForm plugin. What i want: value (string) that is returned by PHP file needs to be returned to jquery, so i can use that image url to set it as bckground of some element:

Here is php file (for uplaoding image):

$path = “uploads/”;

$valid_formats = array("jpg", "png", "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))
                            {
                                echo $actual_image_name; //This is returned, i want thist to be somehow "converted" to jquery
                            }
                        else
                            echo "Sending failed!";
                    }
                    else
                    echo "May filesize 1 Mb!";                  
                    }
                    else
                    echo "Unknown ffile format!";   
            }

        else
            echo "Select image for sending";

        exit;
    }

And, here is jquery code for sending image:

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

Somehow, instead of:

target: '#main'

that puts some html inside of #main, i need to make this:

   $('#main').css('background-image', 'url(' + imageUrl + ')');

where image will be assigned ti #main by css. (imageUrl is that string from php file above: $actual_image_name)

Is this possible, or at least is there some similar solution?

Answer 1

you need to implement success item in jquery form,
you code must be like this
(be sure in php u return full path of image,not need engage himself with json, with echo or print work correctly )

$('#photoimg').live('change', function() {
   $("#main").html('');
   $("#main").html('<img src="/uploader/loader.gif" class="vk_upload_bar"       alt="Uploading...."/>');
   $("#imageform").ajaxForm({
    url : 'yourphpfile' ,
   success :function (data){
          $('#main').css('background-image', 'url(' +  data + ')');

    }

   }).submit();
    });

for more information about jquery form use this link ,

regards