Laravel 7 - Multiple Image Upload with Preview using AJAX

1411 views 8 months ago Laravel

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.

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 Controrller

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

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...

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