0

I am changing image by ajax form submit. On success, it will change the src of existing image as mentioned in below code. Everything works fine. But there is a problem if it passes same URL.

For example,

SUCCESSFUL CASE:

Current URL: example.com/media/ben_profile_pic/1201.png

After AJAX Call: example.com/media/ben_profile_pic/1201.jpg

FAILURE CASE:

Current URL: example.com/media/ben_profile_pic/1201.png

After AJAX Call: example.com/media/ben_profile_pic/1201.png (this is different image but with same format and name)

In second case, Image doesn't get update.

JQUERY:

$("#imgInp").change(function () {
//readURL(this);
var formData = new FormData($('#file_upload_form')[0]);
$.ajax({
    url: '/beneficiary/upload_profile_pic', //server script to process data
    type: 'POST',
    success: function(result){
        //bootbox.alert(result);
        //console.log($.ajaxSettings.xhr().upload);
        if(result!='false'){
            alert(result);
            $('#profile_picture').attr('src', result);
        }
    },
    // Form data
    data: formData,
    //Options to tell JQuery not to process data or worry about content-type
    cache: false,
    contentType: false,
    processData: false
});
});

Let me know if you need any clarification or code. Thanks for any help.

EDIT

I tried with this according to comment, but image is not loading in both cases now:

$('#profile_picture').attr('src', result + new Date().getTime());
RNK
  • 5,582
  • 11
  • 65
  • 133

0 Answers0