Starting: 1st of Every Month 
+91 8409492687 
Contact@DevOpsSchool.com
Step: 1– Install Laravel 5.8 Application
Step: 2– Create Controller
Step: 3– Create View Blade File
Step: 4– Set Route of Controller Method
Step: 5– Run Laravel Application
Step:1 composer create-project --prefer-dist laravel/laravel upload_image
Create Controller now we need to create a controller for handle Http request for multiple images
Step:2 php artisan make:controller MultipleUploadController
Step:3 MultipleUploadController.php
| // paste this code in the multipleUploadController.php | |
| <?php | |
| namespace App\Http\Controllers; | |
| use Illuminate\Http\Request; | |
| class MultipleUploadController extends Controller | |
| { | |
| function index() | |
| { | |
| return view('multiple_file_upload'); | |
| } | |
| function upload(Request $request) | |
| { | |
| $image_code = ''; | |
| $images = $request->file('file'); | |
| foreach($images as $image) | |
| { | |
| $new_name = rand() . '.' . $image->getClientOriginalExtension(); | |
| $image->move(public_path('images'), $new_name); | |
| $image_code .= '<div class="col-md-3" style="margin-bottom:24px;"><img src="/images/'.$new_name.'" class="img-thumbnail" /></div>'; | |
| } | |
| $output = array( | |
| 'success' => 'Images uploaded successfully', | |
| 'image' => $image_code | |
| ); | |
| return response()->json($output); | |
| } | |
| } |
by Step:3 Create View Blade File For display output in browser, In Laravel we need to use View file
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Multipe Upload image with progressbar</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | |
| <script src="http://malsup.github.com/jquery.form.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <br /> | |
| <h3 align="center">Multiple image Upload with Progressbar</h3> | |
| <br /> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading"> | |
| <h3 class="panel-title">Upload Multiple Images </h3> | |
| </div> | |
| <div class="panel-body"> | |
| <br /> | |
| <form method="post" action="{{ route('upload') }}" enctype="multipart/form-data"> | |
| @csrf | |
| <div class="row"> | |
| <div class="col-md-3" align="right"><h4>Select Images</h4></div> | |
| <div class="col-md-6"> | |
| <input type="file" name="file[]" id="file" accept="image/*" multiple /> | |
| </div> | |
| <div class="col-md-3"> | |
| <input type="submit" name="upload" value="Upload" class="btn btn-success" /> | |
| </div> | |
| </div> | |
| </form> | |
| <br /> | |
| <div class="progress"> | |
| <div class="progress-bar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> | |
| 0% | |
| </div> | |
| </div> | |
| <br /> | |
| <div id="success" class="row"> | |
| </div> | |
| <br /> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
| <script> | |
| $(document).ready(function(){ | |
| $('form').ajaxForm({ | |
| beforeSend:function(){ | |
| $('#success').empty(); | |
| $('.progress-bar').text('0%'); | |
| $('.progress-bar').css('width', '0%'); | |
| }, | |
| uploadProgress:function(event, position, total, percentComplete){ | |
| $('.progress-bar').text(percentComplete + '0%'); | |
| $('.progress-bar').css('width', percentComplete + '0%'); | |
| }, | |
| success:function(data) | |
| { | |
| if(data.success) | |
| { | |
| $('#success').html('<div class="text-success text-center"><b>'+data.success+'</b></div><br /><br />'); | |
| $('#success').append(data.image); | |
| $('.progress-bar').text('Uploaded'); | |
| $('.progress-bar').css('width', '100%'); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> |
Step:4 Set Route of Controller Method now we have to set route for the controller method. For this, we have to open routes/web.php file and write the following code for a set route.
| Route::get('multiple-file-upload', 'MultipleUploadController@index'); | |
| Route::post('multiple-file-upload/upload', 'MultipleUploadController@upload')->name('upload'); |
Step:5 Run Laravel Application php artisan serve or click this url http://127.0.0.1:8000/multiple-file-upload
MotoShare.in is your go-to platform for adventure and exploration. Rent premium bikes for epic journeys or simple scooters for your daily errands—all with the MotoShare.in advantage of affordability and ease.
