Laravel 7.x - Multiple Images Upload with Preview Example

573 views 7 months ago Laravel

In this article, i will let you ken 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 additionally it support other laravel version.

In this article, i will engender two route with GET and POST route. we will engender HomeController and two route method. Then we simply engender one blade file. on that file we inscribe jquery ajax code for image upload and make it culled images preview. We will utilize form jquery for call ajax.

So, as follow bellow simple few step and get bellow screenshot layout for full example.

Step 1: Create Routes

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', 'HomeController@imagesUpload');
Route::post('images-upload', 'HomeController@imagesUploadPost')->name('images.upload');

Step 2: Create HomeController

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.']);
    }
}

Step 3: Create View File

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("<img src='"+URL.createObjectURL(event.target.files[i])+"'>");        
           }        
        });  
        $('form').ajaxForm(function() {        
          alert("Uploaded SuccessFully");        
        }); 
    </script>
</html>

i hope you like this article

Author : Harsukh Makwana

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 harsukh21@gmail.com