Laravel ajax显示上传的图片

时间:2017-03-08 21:57:32

标签: javascript php jquery ajax laravel

我已成功上传个人资料图片,现在我想在上传过程完成时立即显示上传/更新的图片,

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

怎么做?

0 个答案:

没有答案