Ajaxイメージアップロード例

14575 ワード
laravel ajax javascript テキストリンク
もともとhttps://codeanddeploy.com訪問し、サンプルコードをダウンロードしてください
このポストでは、私はどのようにイメージをAlaraxを使用してLaraVel 8でアップロードする方法の例を共有します.前の投稿では、https://codeanddeploy.com/blog/laravel/laravel-8-ajax-image-upload-exampleについて書きました.では、Ajax関数を実行し、リクエストをサーバーに送信した後、ページを再ロードする必要はありません.
Laravel image upload without ajax

それを短くするために、ちょうどについて私の前のチュートリアルを使用して、Ajaxを統合してください.
さて、始めましょう、あなたはすでに私の前のチュートリアルに従ったと仮定します.

イメージアップロード ステップ1：ララベルAjaxイメージアップロードのためのコントローラコードをアップデートしてください


以下のコードは、ララベルAjax画像のアップロードをサポートするために更新されたコードです.
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests\ImageUploadRequest;

class ImageUploadController extends Controller
{
    public function index() 
    {
        return view('image-upload.index');
    }

    public function upload(ImageUploadRequest $request) 
    {

        $filename = time() . '.' . $request->image->extension();

        $request->image->move(public_path('images'), $filename);

        // save uploaded image filename here to your database

        return response()->json([
            'message' => 'Image uploaded successfully.',
           'image' => 'images/' . $filename
        ], 200);
    }
}

ステップ2：ビューの更新


では、Ajax機能をサポートするためにビューコードを更新しましょう.以下のコードを参照ください.
<!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Laravel 8 Image Upload Example - codeanddeploy.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

        <style type="text/css">
            .error {
                color: red
            }

            #image {
                display: none;
            }
        </style>

        <script type="text/javascript">
            $(document).ready(function(){
              $('#laravel-image-upload').on('submit', function(event){
                    event.preventDefault();

                    var url = $('#laravel-image-upload').attr('data-action');

                    $.ajax({
                        url: url,
                        method: 'POST',
                        data: new FormData(this),
                        dataType: 'JSON',
                        contentType: false,
                        cache: false,
                        processData: false,
                        success:function(response)
                        {
                            $('#image').attr('src', response.image).show();

                            alert(response.message)
                        },
                        error: function(response) {
                            $('.error').remove();
                            $.each(response.responseJSON.errors, function(k, v) {
                                $('[name=\"image\"]').after('<p class="error">'+v[0]+'</p>');
                            });
                        }
                    });
                });

            });
        </script>
    </head>

    <body>
        <div class="container mt-5">
            <img width="200px" id="image">

            <form data-action="{{ route('image-upload.post') }}" method="POST" enctype="multipart/form-data" id="laravel-image-upload">
                @csrf
                <div class="row">

                    <div class="col-md-6">
                        <input type="file" name="image" class="form-control">
                    </div>

                    <div class="col-md-6">
                        <button type="submit" class="btn btn-success">Upload</button>
                    </div>

                </div>
            </form>
        </div>
    </body>
</html>
今、あなたはすでにAjaxを使用してlaravel 8画像のアップロードを行う方法をすでに考えている.私はこのチュートリアルを助けることを望む.あなたがこのコードをダウンロードしたいならば、親切に をここで訪問してください.
ハッピーコーディング
expected at least 1 bean which qualifies as autowire candidate for this dependency
【Spring-boot】spring-batch伝達パラメータ問題