我已成功上传个人资料图片,现在我想在上传过程完成时立即显示上传/更新的图片,
Jquery:
$('#profile-image-upload').change(function(e){
var profileImageForm = $("#profileImageForm");
profileImageForm.on('submit', function(e){
e.preventDefault();
var file_data = $('#profile-image-upload').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
console.log(form_data);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "/freelance/change-profilePic",
data:form_data,
dataType:'json',
async:false,
type:'post',
processData: false,
contentType: false,
success:function(response){
console.log(response.image);
$('#profile-image').attr('src', response.image + '?' + new Date().getTime());
},
});
}).submit();
});
Html img
标记,其中包含个人资料图片:
<img id="profile-image"
src="/uploads/freelance/profile-pics/{{$authUser->profile_pic}}" alt="" class="profile-image"
onmouseover="this.src='{{asset('freelance/img/demo/people/change.png')}}'"
onmouseout="this.src='/uploads/freelance/profile-pics/{{$authUser->profile_pic}}'">
控制器返回:
return Response::json(['image' => Auth::user()->profile_pic]);
返回例如1489008335.png
。
我试过了:
success:function(response){
$('#profile-image').attr('src', response.image + '?' + new Date().getTime());
},
怎么做?