Как я могу загрузить изображение из формы без кнопки отправки и с автоматическим обновлением sh после загрузки в Laravel? - PullRequest
Новая
       15

Как я могу загрузить изображение из формы без кнопки отправки и с автоматическим обновлением sh после загрузки в Laravel?

0 голосов
/ 28 февраля 2020

Я перепробовал все варианты, которые я нашел в Inte rnet, но не в результате ..

Маршрут Интернета. php: Route::post('profile', 'UserController@update_avatar');

Форма профиля .blade. php: 

<form id="avatar-form" enctype="multipart/form-data" action="/profile" method="POST">
  <label>Update Profile Image</label>
  <input type="hidden" name="name" value="{{ $user->name }}">
  <input type="file" name="avatar" id="avatar">
  <input type="hidden" name="_token" value="{{ csrf_token() }}">
</form>

Контроллер: 

public function update_avatar(Request $request){
        if($request->hasFile('avatar')){
            $avatar = $request->file('avatar');
            $user = Auth::user()->name;
            $filename = $user;
            Image::make($avatar)->resize(300, 300)->save( public_path('images/avatars/' . $filename . '.jpg' ) );

            $user = Auth::user();
            $user->avatar = $filename;
            $user->save();
        }

        return redirect('profile')->with('success', 'Your avatar was uploaded with success !');
    }

Скрипт с проблемой ..: 

<script>
        $("#avatar").click(function(){
            $.ajax({
                type: "POST",
                data: $('#avatar-form').serialize(),
                url: "<?php echo url('/profile') ?>",
                success:function(data){
                    console.log(data);
                },

            });
        });
    </script>

1 Ответ

0 голосов
/ 28 февраля 2020

Просто создайте change событие: 

<script>
        $("#avatar").change(function(){
            $.ajax({
                type: "POST",
                data: $('#avatar-form').serialize(),
                url: "<?php echo url('/profile') ?>",
                success:function(data){
                    window.location.href = window.location.href;
                },

            });
        });
    </script>
...