Загрузка изображений с использованием jQuery + ajax + Laravel

Загрузка изображений является довольно частой задачей. Загрузка изображений с использованием Ajax сделает ваш дизайн намного приятнее, но и чутка добавит работы программисту.

Цель

Цель состоит в том, чтобы загрузить изображение для профиля пользователя. Предположим, у нас есть приложение или веб-сайт, где нам нужно обновить или добавить изображение для профиля пользователя. Здесь мы делаем Ajax-запрос с помощью jQuery. Так что изображение будет загружаться без какого-либо обновления страницы.

Определение Маршрута

Во-первых, определите 2 маршрута в вашем файле маршрутов. Один из них предназначен для показа шаблона формы, а второй – для отправки post запроса нашему контроллеру для загрузки изображения.

Route::get('user/profile', 'UserController@getProfile')->name('profile');

Route::post('user/profile', 'UserController@postProfileUpdate')->name('updateProfile');

Делаем шаблон формы и js код

Создайте шаблон внутри каталога ресурсов с именем profile.blade.php

@extends('app')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h3><i class="fa fa-image"></i> Ajax Image Upload</h3>
                <br>

                <h4>User Profile</h4>
                <hr>
                <div style="display: flex;">
                    <div>
                        <img class="imgPreview img img-circle" 
                         width="80" src="https://via.placeholder.com/80">
                    </div>
                    <div style="margin-left: 15px; flex-grow: 1">
                        <p>Choose a file</p>
                        <input id="photo" type="file">
                        <input type="hidden" name="id" value="{{$user->id}}">
                        <br>
                        <div class="progress">
                            <div class="progress-bar" 
                                 role="progressbar" aria-valuemin="0"
                                 aria-valuemax="100">

                            </div>
                        </div>
                    </div>
                </div>


                <table class="table table-condensed table-bordered">
                    <tr>
                        <td width="100">Name</td>
                        <td>{{$user->name}}</td>
                    </tr>
                    <tr>
                        <td>E-Mail</td>
                        <td>{{$user->email}}</td>
                    </tr>
                    <tr>
                        <td>Phone</td>
                        <td>{{$user->phone}}</td>
                    </tr>
                    <tr>
                        <td>Address</td>
                        <td>{{$user->address}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <script>
        $(function () {
            $.ajaxSetup({
                headers: {'X-CSRF-Token': '{{csrf_token()}}'}
            });

            var id = $('input[name="id"]').val();


            $('#photo').change(function () {
                var photo = $(this)[0].files[0];
                var formData = new FormData();
                formData.append('id', id);
                formData.append('photo', photo);

                $.ajax({
                    xhr: function () {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", function (evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = evt.loaded / evt.total;
                                percentComplete = parseInt(percentComplete * 100);
                                console.log(percentComplete);
                                $('.progress-bar').css('width', percentComplete + '%');
                                if (percentComplete === 100) {
                                    console.log('completed 100%')

                                    var imageUrl = window.URL.createObjectURL(photo)
                                    $('.imgPreview').attr('src', imageUrl);
                                    setTimeout(function () {
                                        $('.progress-bar').css('width', '0%');
                                    }, 2000)
                                }
                            }
                        }, false);
                        return xhr;
                    },
                    url: '{{route('updateProfile')}}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        if(!res.success){alert(res.error)}
                    }
                })
            })
        })
    </script>
@endsection

Важно! Не стоит пихать JS код в шаблон. Его стоит вынести в app.js

Делаем контроллер

Теперь сделайте контроллер с командой artisan php artisan make:controller UserController

<?php
namespace App\Http\Controllers;

use App\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;

class UserController extends Controller
{
    public function getProfile()
    {
        $user = User::find(1);
        return view('profile', compact('user'));
    }

    public function postProfileUpdate(Request $request)
    {
    	$validator = Validator::make($request->all(), [
                		'photo' => 'required|image|mimes:png,jpg,jpeg|max:200',
            		]);

        if ($validator->fails()) {
            return response()
                ->json([
                    'success' => false,
                    'error' =>  $validation->errors()->first()
                ]);
        }

        $user = User::find($request->input('id'));

        if ($request->hasFile('photo')) {
            $photo = $request->file('photo');

            $fileName = $user->id . "." . $photo->getClientOriginalExtension();
            $request->file('photo')->move(public_path('user-photos'), $fileName);
            $user->update(['photo' => $fileName]);
        }

        return ['success'=>true,'message'=>'Successfully updated'];
    }
}

Здесь с помощью getProfile метода мы просто возвращаем данные профиля пользователя в наш вид профиля. 

В postProfileUpdateмы проверили валидатором выбранную пользователем фотографию. Согласно нашей валидации пользователь может загрузить только файл изображения с расширениями png, jpg, jpeg image maximum 200KB.