Laravel 5.6 - Multiple Image Upload Using JQuery And Bootstrap Fileinput With Example

Laravel 5.6 – Multiple Image Upload Using jQuery and Bootstrap Fileinput with example

In this post we will give you information about Laravel 5.6 – Multiple Image Upload Using jQuery and Bootstrap Fileinput with example. Hear we will give you detail about Laravel 5.6 – Multiple Image Upload Using jQuery and Bootstrap Fileinput with exampleAnd how to use it also give you demo for it if it is necessary.

Laravel 5.6 – Multiple Image Upload Using jQuery and Bootstrap Fileinput with example

In this Bootstrap Tutorial, I will let you know how to upload multiple images using jQuery and Bootstrap Fileinut in Laravel 5.6

There are many ways to upload multiple file on the server but this is an enhancement HTML 5 file input for Bootstrap 3.x with file preview, remove uploaded files and many more.

For this example, I am going to start with routes.

Step 1: Add Routes

In this step, I will have following two routes in routes/web.php file.

Route::get('upload-image','FileController@index');
Route::post('upload-image',['as'=>'image.upload','uses'=>'FileController@uploadImages']);

Step 2: Create File Controller

In this example, I will create a controller “FileController.php” in app/Http/Controllers/ directory.

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;
classFileControllerextends Controller
{
   
    publicfunctionindex()
    {
    	return view('file');
    }
   
    publicfunctionuploadImages()
    {
    	$imgName= request()->file->getClientOriginalName();
        request()->file->move(public_path('images'), $imgName);
    	return response()->json(['uploaded'=>'/images/'.$imgName]);
    }
}

Don’t forget to create a “images” directory inside the public.

Step 3: Create View File

In this step, I will create a file “file.blade.php” inside the resources/views directory.

<!DOCTYPE html>
<htmllang="en">
<head>
    <linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"rel="stylesheet">
    <linkhref="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/css/fileinput.css"media="all"rel="stylesheet"type="text/css"/>
    <linkhref="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"media="all"rel="stylesheet"type="text/css"/>
  
</head>
<body>
    <divclass="container">
        <divclass="row">
            <divclass="col-md-12">
                <h1class="text-center">jQuery, Bootstrap Fileinput Example</h1><br>                
                    <divclass="form-group">
                        <divclass="file-loading">
                            <inputid="image-file"type="file"name="file"accept="image/*"data-min-file-count="1"multiple>
                        </div>
                    </div>                
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/js/fileinput.js"type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/themes/fa/theme.js"type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"type="text/javascript"></script>
    <script type="text/javascript">
        $("#image-file").fileinput({
            theme:'fa',
            uploadUrl:"{{route('image.upload')}}",
            uploadExtraData:function() {
                return {
                    _token:"{{ csrf_token() }}",
                };
            },
            allowedFileExtensions: ['jpg', 'png', 'gif','jpeg'],
            overwriteInitial:false,
            maxFileSize:2048,
            maxFilesNum:10
        });
    </script>
</body>
</html>

How can I upload an image from a URL in PHP

How to Upload File or Image With Validation and List File From Database in Laravel 5.2

Laravel 5.3 Upload Image with Validation example

PHP Laravel 5 Intervention image upload and resize tutorial

Laravel 5 – Multiple Images Uploading with drag and drop using dropzone.js example

Show Demo

Label :

PHP

Laravel PHP Framework

File

jQuery

How To

MVC

CSS

Web Development

Bootstrap

JavaScript

Hope this code and post will helped you for implement Laravel 5.6 – Multiple Image Upload Using jQuery and Bootstrap Fileinput with example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Laravel 5.6 – Multiple Image Upload Using jQuery and Bootstrap Fileinput with example

Laravel 5.6 – Multiple Image Upload Using jQuery and Bootstrap Fileinput with example

Label :

Leave a Comment Cancel Reply