update div after image update in jQuery form js

Question

I Have made a live image upload using jquery.form.js using following function.

$('#photoimg').on('change', function(){ 
      $("#imageform").ajaxForm({
        target: '#preview'
      }).submit();
      //AFTER SUCCESS I WANTS TO REFRESH DIV
});

And Html is

<div class="col-xs-12 col-sm-4 col-md-2 col-lg-2" id="profileimage">
  <div class="thmb" align="center">
    <div class="thmb-prev">
      <img src="<?=$img_folder.$user->logo_img?>" class="img-responsive" height="200" alt="logo_img" width="200" alt="" />
    </div>
    <h5 class="fm-title" style="text-align:center;">
      <form id="imageform" method="post" enctype="multipart/form-data" action='ajax/ajax_update_profileimage.php'>
        <input type="file" name="photoimg" id="photoimg" />
      </form>
    </h5>
    <h5 class="fm-title" style="text-align:center;">
      <a href=""><i class="fa fa-trash"></i> Remove</a>
    </h5>
  </div><!-- thmb -->
</div>

I wants to refresh Profileimage div Only so updated image can be shown.so how to update image or page. i tries

$('#form').submit(function(){
    $.ajax({
      url: $('#form').attr('action'),
      type: 'POST',
      data : $('#form').serialize(),
      success: function(){
        console.log('form submitted.');
      }
    });
    return false;
});

but it doesn't work for me.

Answer 1

Return Actual image path after upload in your ajax. For example :

$('#form').submit(function(){
    $.ajax({
      url: $('#form').attr('action'),
      type: 'POST',
      data : $('#form').serialize(),
      success: function(result){
        // result can be uploaded image path or a json containing success and image path both like : {sucess:1,image:'sample/image/path'}
        if(result.sucess) {
            $('.thmb-prev img').attr('src',result.image);
        }
      }
   });
   return false;
});

I hope this helped.