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());