Hari ini, saya ingin membagikan sesuatu yang luar biasa dan luar biasa kepada Anda untuk mengunggah banyak gambar menggunakan aplikasi bootstrap-fileinput plugin laravel 6 Anda dapat membuat galeri gambar seperti multiple upload image, memperbesar gambar, menghapus gambar dll dengan menggunakan plugin bootstrap-fileinput. Anda juga dapat mengatur validasi sisi depan untuk file.
bootstrap-fileinput adalah plugin bootstrap. bootstrap-fileinput menyediakan kami untuk upload banyak gambar atau file menggunakan dropzone. bootstrap-fileinput juga menggunakan dropzone js untuk mengunggah gambar. bootstrap-fileinput adalah plugin yang super dan menakjubkan.
Saya juga memposting banyak tutorial tentang mengunggah gambar atau mengunggah file di laravel, Anda dapat melihat di bawah ini tercantum, tetapi ini sesuatu yang luar biasa.
Seperti yang Anda lihat di atas, semua tautan terkait dengan unggahan gambar di aplikasi Laravel. dalam tutorial ini kita akan membuat beberapa gambar menggunakan plugin bootstrap-fileinput. Jadi mari kita ikuti langkah di bawah ini. Saya juga membuat demo, Anda juga bisa melihatnya.
Langkah 1: Buat Route
Pada langkah ini, kita akan membuat route web. Laravel menyediakan file web.php untuk menulis route layanan web. Jadi, mari kita tambahkan rute baru pada file itu.
route/web.php
Route::get('image-view','ImageController@index');
Route::post('image-view','ImageController@store');Langkah 2: Create ImageController File
pada langkah selanjutnya, sekarang kita telah membuat controller baru sebagai ImageController dan kita akan membuat metode get dan post dengan login image Upload, Jadi mari kita buat controller:
app/Http/Controllers/ImageController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ImageController extends Controller
{
/**
* success response method.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('image-view');
}
/**
* success response method.
*
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$imageName = request()->file->getClientOriginalName();
request()->file->move(public_path('upload'), $imageName);
return response()->json(['uploaded' => '/upload/'.$imageName]);
}
}Langkah 2: Create Blade File
pada langkah terakhir, sekarang kita telah membuat file image-view.blade.php baru di sini kita akan menulis kode untuk plugin js, jadi mari kita buat file:
resources/views/image-view.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
<style type="text/css">
.main-section{
margin:0 auto;
padding: 20px;
margin-top: 100px;
background-color: #fff;
box-shadow: 0px 0px 20px #c1c1c1;
}
.fileinput-remove,
.fileinput-upload{
display: none;
}
</style>
</head>
<body class="bg-danger">
<div class="container">
<div class="row">
<div class="col-lg-8 col-sm-12 col-11 main-section">
<h1 class="text-center text-danger">File Input Example</h1><br>
{!! csrf_field() !!}
<div class="form-group">
<div class="file-loading">
<input id="file-1" type="file" name="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
</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">
$("#file-1").fileinput({
theme: 'fa',
uploadUrl: "/image-view",
uploadExtraData: function() {
return {
_token: $("input[name='_token']").val(),
};
},
allowedFileExtensions: ['jpg', 'png', 'gif'],
overwriteInitial: false,
maxFileSize:2000,
maxFilesNum: 10,
slugCallback: function (filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
</script>
</body>
</html>Anda harus membuat folder "upload" di folder public Anda.
Saya harap ini dapat membantu Anda ....
laravel 7 laravel 6 laravel bootstrap plugin image upload bootstrap-fileinput plugin