Question

我使用以下函数使用jquery.form.js上传了实时图像。

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

而Html是

<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>

我想刷新Profileimage div只有这样更新的图像才能显示。所以如何更新图像或页面。我尝试

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

但它对我不起作用。

Answer 1

在ajax中上传后返回实际图像路径。例如：

$('#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;
});

我希望这会有所帮助。

在jQuery表单js中更新映像后更新div

1 个答案: