Рубрики
Uncategorized

Реализация Ajax загрузки изображения пользователя в проекте laravel

Автор оригинала: David Wong.

В процессе написания веб-программы мы часто сталкиваемся с классической сценой загрузки файла: загрузка изображения. Исходя из стремления к наилучшему пользовательскому опыту, напишите следующее Ajax Загрузите свой аватар.

1. Настройка маршрутизации

В laravel маршруты. php Установите маршрут в:

Route::get('/avatar/upload','[email protected]');
Route::post('/avatar/upload','[email protected]');

2. Настройка контроллера

останься UsersController.php Добавить соответствующий аватар и загрузка аватара Первый используется для визуализации представления, а второй-для обработки фактически загруженного файла изображения.

 public function avatar()
    {

        return view('users.avatar');
    }

  public function avatarUpload()
    {
    //some codes to deal with upload avatar
    }

3. Напишите интерфейсный код

На самом деле это соответствующая пользователи/ Папка На самом деле это соответствующая пользователи/ Папка Установите стиль в файле представления. Следующие HTML-теги могут быть установлены в соответствии с вашей собственной ситуацией класс


 








<

div class="avatar-upload" id="avatar-upload">
 {!! Form::open( [ 'url' => ['/avatar/upload/api'], 'method' => 'POST', 'id' => 'upload', 'files' => true ] ) !!}



{!! Form::close() !!}

Ajax-запросы реализованы в JS. Здесь AJAX использует сторонний плагин http://malsup.com/jquery/form/:

$(document).ready(function() {
            var options = {
                beforeSubmit:  showRequest,
                success:       showResponse,
                dataType: 'json'
            };
            $('#image').on('change', function(){
                $('(upload Avatar'). HTML ('uploading... ');
                $('#upload').ajaxForm(options).submit();
            });
        });
    function showRequest() {
        $("#validation-errors").hide().empty();
        $("#output").css('display','none');
        return true;
    }

    function showResponse(response)  {
        if(response.success == false)
        {
            var responseErrors = response.errors;
            $.each(responseErrors, function(index, value)
            {
                if (value.length != 0)
                {
                    $("#validation-errors").append('
'+ value +'
');
                }
            });
            $("#validation-errors").show();
        } else {

          $('#user-avatar').attr('src',response.avatar);

        }
    }

4. Обработка загруженных изображений

Вернитесь в Вернитесь в Средний 

public function avatar()
    {
        $this->wrongTokenAjax();
        $file = Input::file('image');
        $input = array('image' => $file);
        $rules = array(
            'image' => 'image'
        );
        $validator = Validator::make($input, $rules);
        if ( $validator->fails() ) {
            return Response::json([
                'success' => false,
                'errors' => $validator->getMessageBag()->toArray()
            ]);

        }

        $destinationPath = 'uploads/';
        $filename = $file->getClientOriginalName();
        $file->move($destinationPath, $filename);
                return Response::json(
                    [
                        'success' => true,
                        'avatar' => asset($destinationPath.$filename),
                    ]
                );
            }



    }

Примечание: перед загрузкой убедитесь, что общедоступный/ Создан в каталоге загружает/ Папку, и предоставьте соответствующие разрешения, такие как:

sudo chmod -R 777 uploads/

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

 public function wrongTokenAjax()
    {
        if ( Session::token() !== Request::get('_token') ) {
            $response = [
                'status' => false,
                'errors' => 'Wrong Token',
            ];

            return Response::json($response);
        }

    }

5. последний

Вот простой пример Ajax Демонстрация загруженного изображения завершена. В процессе фактического развития нам необходимо рассмотреть следующие вопросы:

  1. Создавайте разные папки в соответствии с разными именами пользователей или идентификаторами пользователей, которые можно найти в средстве Загрузка аватара Метод $файл->переместить (путь к назначению, имя файла) Предыдущее использование

    2.  
  2. Обновите поле пользователя аватар , оно выглядит так: в Загрузка аватара Прежде чем метод вернет данные, используйте следующую аналогичную инструкцию:
     
    3.  
  3. Если вы хотите еще больше улучшить работу и предоставить некоторые функции, такие как обрезка изображений и добавление фильтров, вы можете использовать PHP-пакет взаимодействия/изображений и реализацию обрезки изображений jcrop JS одновременно, например:
     
     
    Если изображение успешно возвращено, $('#аватар пользователя'). attr('src',response.avatar) После внедрения:
     
     
    Вы можете обрезать изображение на передней панели, а затем обрезать соответствующие данные, такие как высота , ширина , выровнять по x . y-выровнять Его можно перенести на серверную обработку. С помощью взаимодействия/изображения легко обрабатывать изображения в фоновом режиме!
 
Счастливого Взлома




Оригинал: “https://developpaper.com/the-implementation-of-ajax-upload-users-image-in-laravel-project/”





Читайте ещё по теме: