Laravel 7/6 multiple image upload with preview using ajax. In this laravel tutorial, you will learn how to upload multiple images with preview using ajax in laravel.
Sometimes, you work with laravel apps and want to upload multiple images without refreshing a web page with a display preview of each image. So this tutorial will guide you step by step on how to upload multiple images with preview using ajax in laravel 7.x, 6.x version.
If you want to upload multiple images in laravel apps without using ajax. But you want to show preview of images before upload to database and folder, you can checkout this tutorial => Laravel Multiple Image Upload With Preview Tutorial.
Laravel 7 Multiple Image Upload with Preview Using Ajax
Just follow the below steps and upload multiple images using ajax with showing preview in laravel applications:
- Install Laravel Fresh Setup
- Setup Database Credentials
- Create Route
- Generate Controller By Command
- Create the blade view
- Start Development Server
1: Install Laravel Fresh Setup
We need to install laravel fresh application using below command, Open your command prompt and run the below command :
composer create-project --prefer-dist laravel/laravel Blog
After successfully install laravel Application, Go to your project .env file and set up database credential and move next step.
2: Setup Database Credentials
In this step, we will set database credentials in the .env file. Let’s open .env file.
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
3: Create Route
Next, We need to add the resource route. Go to routes/web.php put the below routes here :
Route::get('images-upload', 'ImageController@imagesUpload');
Route::post('images-upload', 'ImageController@imagesUploadPost')->name('images.upload');
4: Generate Controller by Command
Create the ImageController using the below command.
php artisan make:controller ImageController
This command will create a controller name ImageController.
Next open controller, Go to app/HTTP/Controller/ImageController and update the below code here :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function imagesUpload()
{
return view('image');
}
/**
* Create a new controller instance.
*
* @return void
*/
public function imagesUploadPost(Request $request)
{
request()->validate([
'uploadFile' => 'required',
]);
foreach ($request->file('uploadFile') as $key => $value) {
$imageName = time(). $key . '.' . $value->getClientOriginalExtension();
$value->move(public_path('images'), $imageName);
}
return response()->json(['success'=>'Images Uploaded Successfully.']);
}
}
5: Create the blade view
We need to create some blade views files, Go to app/resources/views/ and create one blade view file name image.blade.php and update the following code into your file:
image.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Ajax Multiple Image Upload with Preview Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
<style type="text/css">
input[type=file]{
display: inline;
}
#imgPreview{
border: 1px solid black;
padding: 10px;
}
#imgPreview img{
width: 200px;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Laravel Multiple Image Upload using Ajax with Preview Example</h1>
<form action="{{ route('images.upload') }}" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
<input type="file" id="uploadFile" name="uploadFile[]" multiple/>
<input type="submit" class="btn btn-success" name='submitImage' value="Upload Image"/>
</form>
<br/>
<div id="imgPreview"></div>
</div>
</body>
<script type="text/javascript">
$("#uploadFile").change(function(){
$('#imgPreview').html("");
var total_file=document.getElementById("uploadFile").files.length;
for(var i=0;i<total_file;i++)
{
$('#imgPreview').append("<img src='"+URL.createObjectURL(event.target.files[i])+"'>");
}
});
$('form').ajaxForm(function()
{
alert("Uploaded SuccessFully");
});
</script>
</html>
6: Run Development Server
In this step, we will use the PHP artisan serve command. It will start your server locally
php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080
Now we are ready to run our example so run bellow command to quick run.
http://localhost:8000/images-upload
Conclusion
In this laravel tutorial, you have learn how to upload multiple images with preview using ajax in laravel web applications.
Recommended Laravel Tutorials
- Laravel Tutorial From Scratch | Step By Step
- Laravel Ajax CRUD(DataTables Js) Tutorial Example
- Upload Files/Images to Amazon s3 Cloud Using Laravel Filesystem
- Laravel Ajax CRUD (Operation) Application Example
- Laravel Angular JS CRUD Example Tutorial
- Ajax Image Upload In Laravel Tutorial Example From Scratch
- Laravel CKEditor with Image Upload
- Laravel Intervention Upload Image Using Ajax – Example
- Upload Image to Database with Validation in laravel
If you have any questions or thoughts to share, use the comment form below to reach us.
