Comment télécharger une image en utilisant Ajax dans une application Laravel.
Dans cet exemple, nous allons créer une table images avec une colonne name. Ensuite, nous créerons un formulaire avec un champ de fichier. Lors de l’envoi, l’image sera envoyée via une requête Ajax jQuery, et l’image sera stockée dans un dossier ainsi que dans la base de données.
Suivez les étapes ci-dessous pour réaliser un exemple simple de téléchargement d’image avec Ajax dans Laravel 11.
Table des matières : [Masquer]
Étapes pour télécharger une image avec Ajax dans Laravel
Étape 1 : Installer Laravel 11
composer create-project laravel/laravel example-appÉtape 2 : Créer une migration et un modèle
Nous allons créer une migration pour la table images. Une fois la migration créée, exécutez les migrations pour ajouter la table à la base de données. Ensuite, créez un modèle Laravel pour la table images.
php artisan make:migration create_images_table// database/migrations/2024_03_21_140040_create_images_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up(): void
{
Schema::create('images', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down(): void
{
Schema::dropIfExists('images');
}
};php artisan migratephp artisan make:model Image// app/Models/Image.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Image extends Model
{
use HasFactory;
protected $fillable = [
'name'
];
}Étape 3 : Créer un contrôleur
Créez un nouveau contrôleur ImageController. Ce contrôleur comprendra deux méthodes :
php artisan make:controller ImageController// app/Http/Controllers/ImageController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Image;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;
class ImageController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(): View
{
return view('imageUpload');
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function store(Request $request): JsonResponse
{
// Validation
$request->validate([
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048'
]);
$imageName = time().'.'.$request->image->extension();
$request->image->move(public_path('images'), $imageName);
Image::create(['name' => $imageName]);
return response()->json(['success' => 'Images uploaded successfully!']);
}
}// Store Images in Storage Folder
$image->storeAs('images', $imageName);
// storage/app/images/file.png
// Store Images in Public Folder
$image->move(public_path('images'), $imageName);
// public/images/file.png
// Store Images in S3
$image->storeAs('images', $imageName, 's3');Étape 4 : Ajouter des routes
Ajoutez des routes dans le fichier routes/web.php pour gérer les requêtes GET et POST pour l’affichage du formulaire et le traitement de l’image.
// routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;
Route::get('image-upload', [ImageController::class, 'index']);
Route::post('image-upload', [ImageController::class, 'store'])->name('image.store');Étape 5 : Créer un fichier Blade
Créez un fichier imageUpload.blade.php dans le dossier des vues. Ce fichier comprendra :
Un formulaire HTML pour télécharger l’image.
Un aperçu de l’image avant son envoi.
Un script jQuery pour gérer l’événement de changement de fichier et soumettre le formulaire via une requête Ajax.
// resources/views/imageUpload.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 11 Ajax Image Upload Example - ItSolutionStuff.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="card mt-5">
<h3 class="card-header p-3"><i class="fa fa-star"></i> Laravel 11 Ajax Image Upload Example - ItSolutionStuff.com</h3>
<div class="card-body">
<img id="preview-image" width="300px">
<form action="{{ route('image.store') }}" method="POST" enctype="multipart/form-data" class="mt-2" id="image-upload">
@csrf
<div class="alert alert-danger print-error-msg" style="display:none">
<ul></ul>
</div>
<div class="mb-3">
<label class="form-label" for="inputImage">Select Image:</label>
<input
type="file"
name="image"
id="inputImage"
multiple
class="form-control @error('images') is-invalid @enderror">
@error('images')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="mb-3">
<button type="submit" class="btn btn-success"><i class="fa fa-save"></i> Upload</button>
</div>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
/*------------------------------------------
--------------------------------------------
Input Change Event
--------------------------------------------
--------------------------------------------*/
$('#inputImage').change(function(){
let reader = new FileReader();
reader.onload = (e) => {
$('#preview-image').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
});
/*------------------------------------------
--------------------------------------------
Form Submit Event
--------------------------------------------
--------------------------------------------*/
$('#image-upload').submit(function(e) {
e.preventDefault();
let formData = new FormData(this);
$('#image-input-error').text('');
$.ajax({
type:'POST',
url: "{{ route('image.store') }}",
data: formData,
contentType: false,
processData: false,
success: (response) => {
this.reset();
alert('Image has been uploaded successfully');
},
error: function(response){
$('#image-upload').find(".print-error-msg").find("ul").html('');
$('#image-upload').find(".print-error-msg").css('display','block');
$.each( response.responseJSON.errors, function( key, value ) {
$('#image-upload').find(".print-error-msg").find("ul").append('<li>'+value+'</li>');
});
}
});
});
</script>
</html>
Toutes les étapes nécessaires étant terminées, exécutez la commande suivante pour lancer l’application Laravel :
Ouvrez votre navigateur et accédez à l’URL suivante pour voir le formulaire de téléchargement d’image :
http://localhost:8000/image-uploadUne fois sur la page :
Sélectionnez une image à télécharger.
L’image sera affichée en aperçu avant d’être envoyée.
Cliquez sur “Upload”. L’image sera envoyée via Ajax et enregistrée dans le dossier public ainsi que dans la base de données.
En cas de succès, un message de confirmation sera affiché.
Avec ces étapes, vous avez mis en œuvre un système de téléchargement d’image utilisant Ajax dans Laravel 11. Ce tutoriel peut être étendu pour inclure des fonctionnalités supplémentaires, comme plusieurs téléchargements d’images ou des validations personnalisées.
