Barre de progression du téléchargement de fichiers Ajax jQuery dans Laravel 10

Barre de progression du téléchargement de fichiers Ajax jQuery dans Laravel 10 – Brilliansolution.com. Si vous créez un système pour télécharger des fichiers dans l’application Laravel. Et vous voulez qu’une barre de progression soit également visible lorsque le fichier est en cours de téléchargement. Pour que l’on puisse savoir que le pourcentage du fichier a été téléchargé.

Ainsi, dans ce didacticiel, vous apprendrez à créer une barre de progression lors du téléchargement d’un fichier dans la base de données MYSQL à l’aide du projet Laravel 10 à l’aide de jQuery Ajax.

Barre de progression du téléchargement de fichiers Ajax jQuery dans Laravel 10

En suivant les étapes suivantes, vous pouvez créer une barre de progression ajax lors du téléchargement du fichier dans la base de données MYSQL à l’aide des applications Laravel 10.

• Étape 1 – Créer un nouveau projet Laravel 10
• Étape 2 – Configurer la base de données avec le projet Laravel
• Étape 3 – Création de fichiers pour le modèle et la migration
• Étape 4 – Définir les itinéraires
• Étape 5 – Créer un fichier de contrôleur
• Étape 6 – Créer un fichier de vue de lame
• Étape 7 – Exécutez le serveur de développement
• Étape 8 – Testez cette application

Étape 1 – Créer un nouveau projet Laravel 10

Tout d’abord, ouvrez votre terminal ou invite de commande.

Exécutez ensuite les commandes suivantes pour télécharger et installer la nouvelle application Laravel 10 sur votre système :

cd xampp\htdocs

Then

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

Étape 2 – Configurer la base de données avec le projet Laravel

Dans cette étape, visitez votre fichier téléchargé barre de progression du téléchargement de fichiers laravel à l’aide de l’application ajax répertoire racine et ouvrez fichier .env. Ajoutez ensuite les détails de votre base de données dans fichier .envcomme suit:

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

Recommandé:- Tutoriel de téléchargement d’images Laravel 10

Étape 3 – Création de fichiers pour le modèle et la migration

Dans cette étape, ouvrez à nouveau votre terminal/ligne de commande/invite de commande. Et exécutez-y la commande suivante pour créer des fichiers de modèle et de migration pour vos applications laravel :

php artisan make:model Doc -m

Cette commande créera un nom de modèle Doc.php ainsi qu’un fichier de migration pour le Documents tableau.

Naviguez ensuite vers base de données/migrations dossier et ouvrir create_docs_table.php. Ensuite, mettez à jour le code suivant dans create_docs_table.php:

increments('id');
            $table->string('title');
            $table->timestamps();
        );
    
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    
        Schema::dropIfExists('docs');
    

Après cela, exécutez la commande suivante pour migrer la table vers votre base de données sélectionnée :

php artisan migrate

Recommandé:- Téléchargement d’images Laravel 10 Ajax avec aperçu du didacticiel

Étape 4 – Définir les itinéraires

Dans cette étape, visitez itinéraires répertoire et ouvrir web.php déposer.

Ensuite, mettez à jour les routes suivantes dans votre fichier web.php :

use App\Http\Controllers\UploadFileController;
 
Route::get('ajax-file-upload-progress-bar', [UploadFileController::class, 'index']);
Route::post('store', [UploadFileController::class, 'store']);

Étape 5 – Créer un fichier de contrôleur

Dans cette étape, exécutez la commande suivante sur le terminal pour créer le fichier de contrôleur de téléchargement de fichier ajax :

php artisan make:controller UploadFileController

Cette commande créera un contrôleur nommé UploadFileController.php déposer.

Ensuite, accédez à app/http/controllers/ dossier et ouvrir UploadFileController.php. Ajoutez ensuite les méthodes de téléchargement de fichiers suivantes dans votre UploadFileController.php déposer:

validate([
            'file' => 'required',
        ]);
 
       $title = time().'.'.request()->file->getClientOriginalExtension();
  
       $request->file->move(public_path('docs'), $title);
 
       $storeFile = new Doc;
       $storeFile->title = $title;
       $storeFile->save();
  
        return response()->json(['success'=>'File Uploaded Successfully']);
    

Étape 6 – Créer un fichier de vue de lame

Dans cette étape, créez un fichier de vue de lame nommé barre de progression-file-upload.blade.php.

Maintenant, naviguez /ressources/vues et créer un nom de fichier barre de progression-file-upload.blade.php. Ensuite, mettez à jour le code suivant dans votre barre de progression-file-upload.blade.php déposer:

Laravel 10 Progress Bar File Upload Using Ajax Tutorial



@csrf





0%

Recommandé:- Exemple de tutoriel de téléchargement de fichiers Laravel 10 Livewire

Étape 7 – Exécutez le serveur de développement

Maintenant, exécutez la commande suivante sur le terminal pour démarrer le serveur de développement pour votre Fichier Laravel 10 ajax avec une barre de progression application :

php artisan serve
If you want to run the project diffrent port so use this below command 
php artisan serve --port=8080  

Si vous souhaitez supprimer public ou public/index.php de l’URL dans laravel, Cliquez sur moi

Étape 8 – Testez cette application

Maintenant, ouvrez votre navigateur et tapez-y les URL suivantes :

OR hit in browser

Conclusion

Téléchargement de fichiers Laravel 10 Ajax à l’aide du didacticiel Ajax, vous avez appris à télécharger le fichier avec progression à l’aide d’Ajax dans l’application Laravel 10.

(Visité 1 fois, 1 visites aujourd’hui)

En rapport