✔ Laravel 5 Tutorial : Image Upload And Resize Using Image Intervention With Validation In Laravel 5.3
Laravel 5.3 Tutorial - How to create Image Upload and Resize using Image Intervention with Validation in Laravel 5.3, this lesson will show you how to create simple upload image to public folder before Resize it using Image Intervention. At the previews lessons, we have learn how to create Ajax Image Upload. So please read :
Simple Image upload using Ajax in laravel 5.3
After you have installed Intervention Image, open your Laravel config file config/app.php and add the following lines.
In the $providers array add the service providers for this package.
Add the facade of this package to the $aliases array.
Download this project from this LINK. Sumber http://scqq.blogspot.com
Simple Image upload using Ajax in laravel 5.3
Video Tutorial Simple Upload and Resize Image in laravel 5.3
FULL SOURCE CODE
Here is full source code Image Upload and Resize using Image Intervention Project'sInstallation Image Intervention Laravel
System Requirements
Intervention Image requires the following components to work correctly.PHP >= 5.4And one of the following image libraries.
Fileinfo Extension
GD Library (>=2.0) … or …
Imagick PHP extension (>=6.5.7)
Install using Composer
composer require intervention/image After you have installed Intervention Image, open your Laravel config file config/app.php and add the following lines.
In the $providers array add the service providers for this package.
........... 'Intervention\Image\ImageServiceProvider', ........... Add the facade of this package to the $aliases array.
........... 'Image' => 'Intervention\Image\Facades\Image', ........... Publish configuration in Laravel 5
php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5"Controller (ImagesController.php)
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Image; class ImagesController extends Controller { public function getImage() { return view('upload-images'); } public function postImage(Request $request) { $this->validate($request,[ 'image_file' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:1024', ]); $image_file = $request->file('image_file'); $imagename = time().'.'.$image_file->getClientOriginalExtension(); $destinationPath = public_path('/thumbnail_images'); $thumb_img = Image::make($image_file->getRealPath())->resize(100, 100); $thumb_img->save($destinationPath.'/'.$imagename,80); $destinationPath = public_path('/images'); $image_file->move($destinationPath, $imagename); // you can add more function to save image into database, // see it on the previews video, links will vaillable on desc return back()->with('success','Image Upload successful')->with('imagename',$imagename); } }Routes (web.php)
Route::get('resizeImage',['as'=>'getimage','uses'=>'ImagesController@getImage']); Route::post('resizeImage',['as'=>'postimage','uses'=>'ImagesController@postImage']);Views (upload-images.blade.php)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Simple images Upload</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="panel panel-primary"> <div class="panel-heading"> <h2>Simple Laravel 5.3 Image upload</h2> </div> <div class="panel-body"> @if (count($errors) > 0) <div class="alert alert-danger"> @foreach ($errors->all() as $error) <p class="error_item">{{ $error }}</p> @endforeach </div> @endif @if (Session::get('success')) <div class="row"> <div class="col-md-12"> <div class="col-md-4"> <strong>Image Before Resize:</strong> </div> <div class="col-md-8"> <img src="{{asset('images/'.Session::get('imagename')) }}" /> </div> </div> <div class="col-md-12"> <div class="col-md-4"> <strong>Image after Resize:</strong> </div> <div class="col-md-8"> <img src="{{asset('thumbnail_images/'.Session::get('imagename')) }}" /> </div> </div> </div> @endif {!! Form::open(array('route' => 'postimage','files'=>true)) !!} <div class="row"> <div class="col-md-6"> <br/> {!! Form::file('image_file', array('class' => 'form-control')) !!} </div> <div class="col-md-6"> <br/> <button type="submit" class="btn btn-success">Upload Image</button> </div> </div> {!! Form::close() !!} </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html> More Laravel Video's Tutorial For Beginners :
Download this project from this LINK. Sumber http://scqq.blogspot.com
0 Response to "✔ Laravel 5 Tutorial : Image Upload And Resize Using Image Intervention With Validation In Laravel 5.3"
Posting Komentar