Search code examples
phpjqueryhtmlajaxform

how to update image src on success using jquery.form.js


i am using jquery.form.js to ajax submit form and get response.

my php page is set to echo image url like "images/thumbs/071112130957.jpg"

heres my jquery:

$("#imageform").ajaxForm(
{ 
target: '#preview'
}).submit();
});

heres my html form

<form action="cropscript.php" id="imageform" method="post" enctype="multipart/form-data">
<input type="file" name="image" id="image" /> <br/>
<input type="submit" name="submit" value="upload image" />
</form>

<div id="preview" > </div>
<img src = "thumbs/default.jpg" id="thumb_img" />

now my question is how do i update the img#thumb_img src after ajaxform success ?


Solution

  • this was what worked for me.

    $(document).ready(function() { 
        $('#image').live('change', function()   
        { 
                $("#imageform").ajaxForm({ 
                        target: '#preview',
                        dataType: 'json',
                        success : function (response) {
                                    $('#thumb_img').attr('src','images/thumbs/'+response.imgsrc);
                        }
                }).submit();
    
        });
    });