Laravel 8: Ajax загрузка изображения с предварительным просмотром

09/11/2021 22:24

В этом руководстве вы шаг за шагом узнаете, как загрузить изображение с помощью jQuery ajax с предварительным просмотром в laravel 8.

Кроме того, вы узнаете, как загрузить изображение с помощью кода jQuery и ajax для предварительного просмотра без обновления или перезагрузки веб-страницы или html-страницы.

Загрузка изображений с помощью Ajax и предварительным просмотр

Выполните следующие шаги и загрузите изображение с помощью ajax с предварительным просмотром в приложениях laravel 8:

Шаг 1 - Построение модели и миграция

Откройте командную строку и запустите в ней следующую команду, чтобы создать модель и файл миграции для формы:

php artisan make:model Photo -m

После этого откройте файл create_photos_table.php в каталоге LaravelImage/database/migrations/ и обновите функцию up() следующим кодом:

public function up()
{
    Schema::create('photos', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('path');
        $table->timestamps();
    });
}

Затем снова откройте командную строку и выполните следующую команду для создания таблиц в базе данных:

php artisan migrate

Шаг 2 - Создайте маршруты

На этом этапе откройте файл web.php из директории маршрутов (routes) и обновите следующие маршруты в файле web.php:

use App\Http\Controllers\AjaxUploadController;
 
Route::get('image-preview', [AjaxUploadController::class, 'index']);
Route::post('upload', [AjaxUploadController::class, 'store']);

Шаг 3 - Создайте контроллер командой Artisan

На этом этапе выполните следующую команду в командной строке, чтобы создать файл контроллера:

php artisan make:controller AjaxUploadController

После этого перейдите в app/http/controllers и откройте файл AjaxUploadController.php и обновите в нем следующий код:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\Photo;
 
class AjaxUploadController extends Controller
{
     public function index()
    {
        return view('image-upload-preview-form');
    }
 
    public function store(Request $request)
    {
         
        $validatedData = $request->validate([
         'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',
 
        ]);
 
        $name = $request->file('image')->getClientOriginalName();
 
        $path = $request->file('image')->store('public/images');
 
 
        $save = new Photo;
 
        $save->name = $name;
        $save->path = $path;
 
        $save->save();
 
        return response()->json($path);
 
    }
}

Следующая строка кода загрузит изображение в каталог images:

$path = $request->file('image')->store('public/images');

Шаг 4 - Создайте форму загрузки изображения Ajax

Теперь создайте загрузку изображения ajax с формой предварительного просмотра в файле представления, чтобы отобразить предварительный просмотр изображения перед загрузкой в базу данных и папку.

Итак, перейдите к resources/views и создайте image-upload-preview-form.blade.php и обновите в нем следующий код:

<!DOCTYPE html>
<html>

<head>
    <title>Laravel 8 Ajax Image Upload With Preview - MakeCodes.ru</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
    <div class="container mt-4">
        <h2 class="text-center">Image Upload with Preview using jQuery Ajax in Laravel 8 - MakeCodes.ru</h2>
        <form method="POST" enctype="multipart/form-data" id="image-upload" action="jаvascript:void(0)">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <input type="file" name="image" placeholder="Выбрать изображение" id="image">
                    </div>
                </div>
                <div class="col-md-12 mb-2">
                    <img id="preview-image-before-upload" src="/images/product_image_not_found.gif" alt="preview image" style="max-height: 250px;">
                </div>
                <div class="col-md-12">
                    <button type="submit" class="btn btn-primary" id="submit">Отправить</button>
                </div>
            </div>
        </form>
    </div>
    <script type="text/jаvascript">
        $(document).ready(function(e) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $('#image').change(function() {
                let reader = new FileReader();
                reader.onload = (e) => {
                    $('#preview-image-before-upload').attr('src', e.target.result);
                }
                reader.readAsDataURL(this.files[0]);
            });
            $('#image-upload').submit(function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                $.ajax({
                    type: 'POST',
                    url: "{{ url('upload')}}",
                    dаta: formData,
                    cache: false,
                    contentType: false,
                    processdаta: false,
                    success: (data) => {
                        this.reset();
                        alert('Изображение было успешно загружено с помощью jQuery ajax');
                    },
                    error: function(data) {
                        console.log(data);
                    }
                });
            });
        });
    </script>
    </div>
</body>

</html>

Шаг 5 - Создайте каталог изображений в storage/app/public

Теперь создайте каталог изображений в каталоге storage/app/public. Поскольку следующая строка кода загрузит изображение в каталог images, который находится внутри каталога storage/app/public.

Шаг 6 - Запустите сервер разработки

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

php artisan serve

Затем откройте в браузере следующий URL:

http://127.0.0.1:8000/image-preview

Laravel

1 + 0 -

MakeCodes
0
1 110