中條 美冬

1649930471

Laravelでプレビュー付きのAjaxを使用して複数の画像をアップロードする方法

このチュートリアルでは、laravel8アプリでプレビュー付きのajaxを使用して複数の画像をアップロードする方法を共有したいと思います

Laravel8アプリケーションをインストールする

手順1で、ターミナルを開き、次のコマンドを使用してローカルWebサーバーディレクトリに移動します。

//for windows user
cd xampp/htdocs

//for ubuntu user
cd var/www/html

次に、次のコマンドを使用してlaravel8最新アプリケーションをインストールします。

composer create-project --prefer-dist laravel/laravel blog

データベース構成

ステップ2で、ダウンロードしたlaravel8アプリを任意のテキストエディターで開きます。次に、.envファイルを見つけて、次のようにデータベースの詳細を構成します。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

 

モデルの構築と移行

このステップでは、以下のコマンドを使用して、phtoto移行とモデルファイルを作成します。

まず、次のコマンドを使用してプロジェクトに移動します。

cd / blog

次に、次のコマンドを使用してモデルと移行ファイルを作成します。

php artisan make:model Photo -m

上記のコマンドは、次の場所にある検証チュートリアルアプリを使用してlaravel8の複数の画像のアップロードに2つのファイルを作成します。

  • blog / app / Models / Photo.php
  • blog / database / migrations / create_photos_table.php

したがって、blog / database /migrations/ディレクトリ内でcreate_photos_table.phpファイルを見つけます。次に、このファイルを開き、次のコードをこのファイルの関数up()に追加します。

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

次に、ターミナルを再度開き、cmdで次のコマンドを入力して、選択したデータベースにテーブルを作成します。

php artisan migrate

 

ルートを作成する

このステップでは、web.phpファイルを開いて、routesディレクトリ内を移動します。次に、次のルートをweb.phpファイルに更新します。

use App\Http\Controllers\AjaxUploadMultipleImageController;
 
Route::get('multiple-image-preview', [AjaxUploadMultipleImageController::class, 'index']);
 
Route::post('upload-multiple-image-ajax', [AjaxUploadMultipleImageController::class, 'saveUpload']);

Artisanコマンドを使用してコントローラーを作成する

このステップでは、以下のphpartisanコマンドを使用してコントローラーを作成します。

php artisan make:controller AjaxUploadMultipleImageController

上記のコマンドは、 blog / app / Http /Controllers/ディレクトリ内にあるAjaxUploadMultipleImageController.phpファイルを作成します。

したがって、UploadImagesController.phpファイルを開き、次のコードを追加します。

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Models\Photo;
 
class AjaxUploadMultipleImageController extends Controller
{
   public function index()
    {
        return view('multiple-image-upload-preview-ajax');
    }
 
    public function saveUpload(Request $request)
    {
         
        $validatedData = $request->validate([
        'images' => 'required',
        'images.*' => 'mimes:jpg,png,jpeg,gif,svg'
        ]);
 
        if($request->TotalImages > 0)
        {
                
           for ($x = 0; $x < $request->TotalImages; $x++) 
           {
 
               if ($request->hasFile('images'.$x)) 
                {
                    $file      = $request->file('images'.$x);
 
                    $path = $file->store('public/images');
                    $name = $file->getClientOriginalName();
 
                    $insert[$x]['name'] = $name;
                    $insert[$x]['path'] = $path;
                }
           }
 
            Photo::insert($insert);
 
            return response()->json(['success'=>'Multiple Image has been uploaded into db and storage directory']);
 
          
        }
        else
        {
           return response()->json(["message" => "Please try again."]);
        }
 
    }   
         
}

複数の画像をアップロードするためのAjaxフォームを作成する

このステップでは、resources/viewsディレクトリに移動します。次に、このディレクトリ内にmultiple-image-upload-preview-ajax.blade.phpという名前の新しいブレードビューファイルを作成します。

したがって、このmultiple-image-upload-preview-ajax.blade.phpファイルをテキストエディターで開き、次のコードを更新します。

<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Multiple Image Upload AJAX With Preview - Codequs.com</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>
<style>
.show-multiple-image-preview img
{
padding: 6px;
max-width: 100px;
}
</style>
</head>
<body>
<div class="container mt-5">
<h2 class="text-center">Laravel 8 Ajax Multiple Image Upload With Preview - Tutsmake.com</h2>
<div class="text-center">
<form id="multiple-image-preview-ajax" method="POST"  action="javascript:void(0)" accept-charset="utf-8" enctype="multipart/form-data">
@csrf
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="file" name="images[]" id="images" placeholder="Choose images" multiple >
</div>
@error('images')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
<div class="col-md-12">
<div class="mt-1 text-center">
<div class="show-multiple-image-preview"> </div>
</div>  
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</div>
</div>     
</form>
</div>
</div>  
<script type="text/javascript">
$(document).ready(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(function() {
// Multiple images preview with JavaScript
var ShowMultipleImagePreview = function(input, imgPreviewPlaceholder) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#images').on('change', function() {
ShowMultipleImagePreview(this, 'div.show-multiple-image-preview');
});
});    
$('#multiple-image-preview-ajax').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
let TotalImages = $('#images')[0].files.length; //Total Images
let images = $('#images')[0];
for (let i = 0; i < TotalImages; i++) {
formData.append('images' + i, images.files[i]);
}
formData.append('TotalImages', TotalImages);
$.ajax({
type:'POST',
url: "{{ url('upload-multiple-image-ajax')}}",
data: formData,
cache:false,
contentType: false,
processData: false,
success: (data) => {
this.reset();
alert('Images has been uploaded using jQuery ajax with preview');
$('.show-multiple-image-preview').html("")
},
error: function(data){
console.log(data);
}
});
});
});
</script>
</body>
</html>

複数の画像プレビューを表示するjQueryコード

このステップでは、laravel 8でajaxを使用してアップロードする前に、複数の画像プレビューを表示または表示するjQueryコードを実装します。

$(function() {
// Multiple images preview with JavaScript
var ShowMultipleImagePreview = function(input, imgPreviewPlaceholder) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#images').on('change', function() {
ShowMultipleImagePreview(this, 'div.show-multiple-image-preview');
});
}); 

複数の画像をアップロードするためのAjaxコードを書く

このステップでは、jQueryを実装すると、ajaxコードがlaravel8コントローラーファイルに複数の画像をアップロードします。

$('#multiple-image-preview-ajax').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
let TotalImages = $('#images')[0].files.length; //Total Images
let images = $('#images')[0];
for (let i = 0; i < TotalImages; i++) {
formData.append('images' + i, images.files[i]);
}
formData.append('TotalImages', TotalImages);
$.ajax({
type:'POST',
url: "{{ url('upload-multiple-image-ajax')}}",
data: formData,
cache:false,
contentType: false,
processData: false,
success: (data) => {
this.reset();
alert('Images has been uploaded using jQuery ajax with preview');
$('.show-multiple-image-preview').html("")
},
error: function(data){
console.log(data);
}
});
});

開発サーバーを起動します

この手順では、cmdで次のコマンドを実行して、開発サーバーを起動します。

php artisan serve

次に、このアプリをブラウザーで起動します。ブラウザーを開き、次のURLをブラウザーに起動します。

http://127.0.0.1:8000/multiple-image-preview

What is GEEK

Buddha Community

中條 美冬

1649930471

Laravelでプレビュー付きのAjaxを使用して複数の画像をアップロードする方法

このチュートリアルでは、laravel8アプリでプレビュー付きのajaxを使用して複数の画像をアップロードする方法を共有したいと思います

Laravel8アプリケーションをインストールする

手順1で、ターミナルを開き、次のコマンドを使用してローカルWebサーバーディレクトリに移動します。

//for windows user
cd xampp/htdocs

//for ubuntu user
cd var/www/html

次に、次のコマンドを使用してlaravel8最新アプリケーションをインストールします。

composer create-project --prefer-dist laravel/laravel blog

データベース構成

ステップ2で、ダウンロードしたlaravel8アプリを任意のテキストエディターで開きます。次に、.envファイルを見つけて、次のようにデータベースの詳細を構成します。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

 

モデルの構築と移行

このステップでは、以下のコマンドを使用して、phtoto移行とモデルファイルを作成します。

まず、次のコマンドを使用してプロジェクトに移動します。

cd / blog

次に、次のコマンドを使用してモデルと移行ファイルを作成します。

php artisan make:model Photo -m

上記のコマンドは、次の場所にある検証チュートリアルアプリを使用してlaravel8の複数の画像のアップロードに2つのファイルを作成します。

  • blog / app / Models / Photo.php
  • blog / database / migrations / create_photos_table.php

したがって、blog / database /migrations/ディレクトリ内でcreate_photos_table.phpファイルを見つけます。次に、このファイルを開き、次のコードをこのファイルの関数up()に追加します。

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

次に、ターミナルを再度開き、cmdで次のコマンドを入力して、選択したデータベースにテーブルを作成します。

php artisan migrate

 

ルートを作成する

このステップでは、web.phpファイルを開いて、routesディレクトリ内を移動します。次に、次のルートをweb.phpファイルに更新します。

use App\Http\Controllers\AjaxUploadMultipleImageController;
 
Route::get('multiple-image-preview', [AjaxUploadMultipleImageController::class, 'index']);
 
Route::post('upload-multiple-image-ajax', [AjaxUploadMultipleImageController::class, 'saveUpload']);

Artisanコマンドを使用してコントローラーを作成する

このステップでは、以下のphpartisanコマンドを使用してコントローラーを作成します。

php artisan make:controller AjaxUploadMultipleImageController

上記のコマンドは、 blog / app / Http /Controllers/ディレクトリ内にあるAjaxUploadMultipleImageController.phpファイルを作成します。

したがって、UploadImagesController.phpファイルを開き、次のコードを追加します。

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Models\Photo;
 
class AjaxUploadMultipleImageController extends Controller
{
   public function index()
    {
        return view('multiple-image-upload-preview-ajax');
    }
 
    public function saveUpload(Request $request)
    {
         
        $validatedData = $request->validate([
        'images' => 'required',
        'images.*' => 'mimes:jpg,png,jpeg,gif,svg'
        ]);
 
        if($request->TotalImages > 0)
        {
                
           for ($x = 0; $x < $request->TotalImages; $x++) 
           {
 
               if ($request->hasFile('images'.$x)) 
                {
                    $file      = $request->file('images'.$x);
 
                    $path = $file->store('public/images');
                    $name = $file->getClientOriginalName();
 
                    $insert[$x]['name'] = $name;
                    $insert[$x]['path'] = $path;
                }
           }
 
            Photo::insert($insert);
 
            return response()->json(['success'=>'Multiple Image has been uploaded into db and storage directory']);
 
          
        }
        else
        {
           return response()->json(["message" => "Please try again."]);
        }
 
    }   
         
}

複数の画像をアップロードするためのAjaxフォームを作成する

このステップでは、resources/viewsディレクトリに移動します。次に、このディレクトリ内にmultiple-image-upload-preview-ajax.blade.phpという名前の新しいブレードビューファイルを作成します。

したがって、このmultiple-image-upload-preview-ajax.blade.phpファイルをテキストエディターで開き、次のコードを更新します。

<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Multiple Image Upload AJAX With Preview - Codequs.com</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>
<style>
.show-multiple-image-preview img
{
padding: 6px;
max-width: 100px;
}
</style>
</head>
<body>
<div class="container mt-5">
<h2 class="text-center">Laravel 8 Ajax Multiple Image Upload With Preview - Tutsmake.com</h2>
<div class="text-center">
<form id="multiple-image-preview-ajax" method="POST"  action="javascript:void(0)" accept-charset="utf-8" enctype="multipart/form-data">
@csrf
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="file" name="images[]" id="images" placeholder="Choose images" multiple >
</div>
@error('images')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
<div class="col-md-12">
<div class="mt-1 text-center">
<div class="show-multiple-image-preview"> </div>
</div>  
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</div>
</div>     
</form>
</div>
</div>  
<script type="text/javascript">
$(document).ready(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(function() {
// Multiple images preview with JavaScript
var ShowMultipleImagePreview = function(input, imgPreviewPlaceholder) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#images').on('change', function() {
ShowMultipleImagePreview(this, 'div.show-multiple-image-preview');
});
});    
$('#multiple-image-preview-ajax').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
let TotalImages = $('#images')[0].files.length; //Total Images
let images = $('#images')[0];
for (let i = 0; i < TotalImages; i++) {
formData.append('images' + i, images.files[i]);
}
formData.append('TotalImages', TotalImages);
$.ajax({
type:'POST',
url: "{{ url('upload-multiple-image-ajax')}}",
data: formData,
cache:false,
contentType: false,
processData: false,
success: (data) => {
this.reset();
alert('Images has been uploaded using jQuery ajax with preview');
$('.show-multiple-image-preview').html("")
},
error: function(data){
console.log(data);
}
});
});
});
</script>
</body>
</html>

複数の画像プレビューを表示するjQueryコード

このステップでは、laravel 8でajaxを使用してアップロードする前に、複数の画像プレビューを表示または表示するjQueryコードを実装します。

$(function() {
// Multiple images preview with JavaScript
var ShowMultipleImagePreview = function(input, imgPreviewPlaceholder) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#images').on('change', function() {
ShowMultipleImagePreview(this, 'div.show-multiple-image-preview');
});
}); 

複数の画像をアップロードするためのAjaxコードを書く

このステップでは、jQueryを実装すると、ajaxコードがlaravel8コントローラーファイルに複数の画像をアップロードします。

$('#multiple-image-preview-ajax').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
let TotalImages = $('#images')[0].files.length; //Total Images
let images = $('#images')[0];
for (let i = 0; i < TotalImages; i++) {
formData.append('images' + i, images.files[i]);
}
formData.append('TotalImages', TotalImages);
$.ajax({
type:'POST',
url: "{{ url('upload-multiple-image-ajax')}}",
data: formData,
cache:false,
contentType: false,
processData: false,
success: (data) => {
this.reset();
alert('Images has been uploaded using jQuery ajax with preview');
$('.show-multiple-image-preview').html("")
},
error: function(data){
console.log(data);
}
});
});

開発サーバーを起動します

この手順では、cmdで次のコマンドを実行して、開発サーバーを起動します。

php artisan serve

次に、このアプリをブラウザーで起動します。ブラウザーを開き、次のURLをブラウザーに起動します。

http://127.0.0.1:8000/multiple-image-preview