Laravel 7.x and 6.x Ajax Multiple Image Upload with Preview Example

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.

Demo:

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>

At Last Make sure you have "images" folder in public folder. All images will store in that folder.

Laravel 7.x and 6.x Ajax Multiple Image Upload with Preview Example

Do you like below Tutorials ?

New Articles

Blog Categories

Random Articles