In this article, i will let you know ajax multiple image upload with preview in laravel 5 application. You will simply implement laravel 5 jquery ajax multiple image upload with validation example. Just follow bellow full example for jquery ajax multiple image upload and preview in Laravel 5.5 application and also it support other laravel version.
In this article, i will create two route with GET and POST route. we will create HomeController and two route method. Then we simply create one blade file. on that file we write jquery ajax code for image upload and make it selected images preview. We will use form jquery for call ajax.
So, as follow bellow simple few step and get bellow screenshot layout for full example.
first of all, we will add routes and controller file so first add bellow route in your routes.php file.
routes/web.php
Route::get('images-upload', '[email protected]');
Route::post('images-upload', '[email protected]')->name('images.upload');
now we need to create new HomeController for image uploading and generate view file. So let's create HomeController and put bellow code.
app/Http/Controllers/HomeController.php
<?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('imagesUpload');
}
/**
* 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.']);
}
}
At Last first we will create imagesUpload.blade.php file and put bellow code. So let's copy and paste bellow code.
resources/views/imagesUpload.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;
}
#image_preview{
border: 1px solid black;
padding: 10px;
}
#image_preview img{
width: 200px;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Laravel Ajax Multiple Image Upload 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="image_preview"></div>
</div>
</body>
<script type="text/javascript">
$("#uploadFile").change(function(){
$('#image_preview').html("");
var total_file=document.getElementById("uploadFile").files.length;
for(var i=0;i<total_file;i++)
{
$('#image_preview').append("imgsrc='"+URL.createObjectURL(event.target.files[i])+"'>");
}
});
$('form').ajaxForm(function()
{
alert("Uploaded SuccessFully");
});
</script>
</html>
At Last Make sure you have "images" folder in public folder. All images will store in that folder.
I hope you found your best...
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
Laravel 8 - If condition in blade Example
In this article, I will share with you h...Angular Advance Interview Questions 2021
Angular is a very popular name among web...How to add CSS properties to an element dynamically using jQuery
Use the jQuery css() method You can u...How to return view with data in Laravel 8 using Ajax
When sending data over Ajax in Laravel,...How to populate dropdown list with array values in PHP
Use the PHP foreach loop Yo...