How to change image src on success AJAX

Question

the form:

<form  action="/user/updateProfilePicture" id="uploadPhotoForm" method="POST" enctype="multipart/form-data">
      <button class="btn btn-onetraffic btn-responsive btn-large">+Change photo</button>
      <input class="btn btn-onetraffic btn-responsive btn-large" style="opacity: 0; height: 34px; margin-top: -34px;" type="file" id="uploadPhoto" name="file" accept="image/*">
</form>

Div where I want to my image source to be changed:

 <div id="img-container">
   <img id="upSlika" src="#"/>
 </div>

I get my images url from server through JSON

I tried :

success:function(){
                    console.log("success");
                    $("#upSlika").attr("src", res.pictureUrl);
                },

res is response I get

Possible duplicate of [Change the image source using jQuery](http://stackoverflow.com/questions/540349/change-the-image-source-using-jquery) — RIYAJ KHAN, Mar 18 '16 at 13:34

score 1 · Answer 1 · answered Mar 18 '16 at 13:37

1

the success callback must be like this:

 success: function (res) {  

          $("#upSlika").attr("src", res.pictureUrl);    

     }

answered Mar 18 '16 at 13:37

aitnasser

1,216
1
9
23

try to console the res argument inside the succes function (console.log(res);) – aitnasser Mar 18 '16 at 13:42

score 0 · Answer 2 · answered Mar 18 '16 at 13:41

0

You need to use:

success: function (res) {  
      $("#upSlika").attr("src", res["pictureUrl"]);    
}

answered Mar 18 '16 at 13:41

Milind Anantwar

81,290
25
94
125

this works but when i refresh the page it dissapears for some reason. but thanks. – Mar 18 '16 at 14:36

score 0 · Answer 3 · answered Mar 18 '16 at 13:47

Use .prop() on newer versions of jQuery.

success: function (response) {  
  $("#upSlika").prop("src", response.image);    
}

where response.image holds the image src.

In your ajax.php file you can add the src in the array as below example :

json_encode(array('status'=>'success', 'image'=>'/path/to/image.jpg') );

How to change image src on success AJAX

3 Answers3