Multiple Image Upload using Ajax with Laravel 5.8

I share way multiple image upload using ajax with laravel 5.8.

Install Project Laravel

composer create-project --prefer-dist laravel/laravel blog "5.8.*"

After when install project laravel, you can create begin file upload.blade.php in folder Views/pages/upload.blade.php

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <form action="" enctype="multipart/form-data" method="post" id="upload">
                <h2>Upload image multiple in Laravel 5.8</h2>
                <div class="form-group">
                    <label for="image 1">Image 1</label>
                    <input type="file" name="files"  class="selectImage" id="images"/>
                    <div class="show-progress">

                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary" id="uploadImage">Upload</button>
                </div>  
            </form>
        </div>
    </div>
    <div class="row justify-content-center" id="showImage">

    </div>
</div>
@endsection

Continue! you create file js and include the following code

 $(document).ready(function(){

            var i=0;
            var dataImage = new Array();
            var dataPosition = new Array();

            $("#images").change(function(){
                var checkImage = this.value;
                var ext = checkImage.substring(checkImage.lastIndexOf('.') + 1).toLowerCase();
                if (ext == "gif" || ext == "png" || ext == "jpg" || ext == "jpeg")
                {
                    change(this);
                    var file = document.getElementById('images').files[0];
                    dataImage[i]=file; //add push to array dataImage
                    dataPosition[i]=i;  //add push position to dataPosition
                   //created html progress
                    var html_progress = '<div class="progress" style="margin-bottom:5px;"><div class="progress-bar" id="progress-'+i+'" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div></div>';
                    $(".show-progress").append(html_progress);
                    i++;
                }
                else
                    alert("Please select image file (jpg, jpeg, png).")  
            });
            var change = function(input){
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var addImage = '<div class="col-md-3"><img src='+e.target.result+'></div>';

                        //add image to div="showImage"
                        $("#showImage").append(addImage);
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            }
            var upload = function(data,position){
                var formData = new FormData();  
                   //append data to formdata 
                    formData.append('image',data);
                    var id = position;
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        type:'POST',
                        url:'http://localhost:8000/form/upload',
                        data:formData,
                        contentType: false,
                        dataType:'json',
                        processData: false,
                        cache:false,
                        xhr: function () {
                            console.log(id);
                            var xhr = new window.XMLHttpRequest();
                            xhr.upload.addEventListener("progress", function (evt) {
                                if (evt.lengthComputable) {
                                    var percentComplete = evt.loaded / evt.total;
                                    percentComplete = parseInt(percentComplete * 100);
                                    if(percentComplete==100){
                                        dataImage.splice(id, 1);
                                        dataPosition.splice(id, 1);
                                    }
                                    $("#progress-"+id).text(percentComplete + '%');
                                    $("#progress-"+id).css('width', percentComplete + '%');
                                }
                            }, false);
                            return xhr;
                        },
                        success:function(data){
                            console.log(data);
                        }

                    });
            }

            $("form#upload").submit(function( event ) {
                    event.preventDefault();
                    var k=0;
                    for(k=0; k<dataImage.length;k++){

                        /**
                         * Function Upload
                         * params 1: data image
                         * params 2: position[ progressbar-1 or progressbar-2,...]
                         */
                        upload(dataImage[k],dataPosition[k]);
                    }    
            });


        });

The above code, including events, when clicking the image, upload the image.
The code for uploading images to a folder in laravel is as follows
Create file FormController.php in folder App\Http\Controllers\FormController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FormController extends Controller
{
    public function index(){

        return View('pages.upload');
    }
    /**
     * UPLOAD IMAGES
     */
    public function store(Request $request){
      if($request->hasFile('image')){
          $file = $request->file('image');
          $name = $file->getClientOriginalName();
          $exection = $file->getClientOriginalExtension();
          $file->move(public_path().'/uploads/', $name);
          //echo public_path().'/uploads/';
          return Response()->json(array('success'=>1,'message'=>'Upload success!'));
      }else{
        return Response()->json(array('success'=>0,'message'=>'Upload error!'));
      }
    }
}

Config file web.php in folder routes/web.php

Route::prefix('form')->group(function () {
    Route::get('/','FormController@index')->name('form.index');
    Route::post('/upload','FormController@store')->name('form.store');
});

Success! you run command

php artisan serve

http://localhost:8000/form

Post:Multiple Image Upload using Ajax with Laravel 5.8