Posted By
Bajarangi soft ,
Posted On 27-01-2021
Step 1:Create a table and model for Image Uploading , inserting as well as retrieving.
class Image extends Model
{
public $table = 'image';
protected $fillable = [
'name','password','confirm_password','image'
];
}
<html>
<head>
<title>Image</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel='stylesheet' href='style.css'/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src='script.js'></script>
</head>
<br>
<body>
<div id="main_container" class="container">
<div class="alert alert-warning" id="message" style="display: none"></div>
<div class="row">
<form id="preview" method="POST" action="javascript:void(0)" accept-charset="utf-8" enctype="multipart/form-data">
@csrf
<div class="col-md-6">
{{ csrf_field() }}
<div class="form-group">
<div id="birth_date_input" class="control-label">Image:
<input type="file" id="images" name="images[]" enctype="multipart/form-data" multiple>
</div>
</div>
</div>
<div class="col-md-6">
<button id="imgbtn" class="btn btn-success" style="margin-top: 25px;">Upload</button>
</div>
<div class="row">
<div class="col-md-12">
<div id="age_container"><span id="exact_age"></span></div>
<div id="age_container"><span id="exact_age1"></span></div>
<div id="age_container"><span id="exact_age2"></span></div>
</div>
</div>
</form>
<div id="divtbl"></div>
<table id="table_id" class="table table-bordered table-hover table-striped">
<thead>
<tr><th>#</th>
<th>Picture</th>
</tr>
</thead>
<tbody id="img-fetch">
@foreach($product as $image)
<tr id="row_id">
<td>{{$image->id}}</td>
<td> <?php
$data = $image->images;
?>
<img src="{{ asset('public/images/'.$image->images) }}"
style="height:120px; width:200px" />
<?php
?>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="show-multiple-image-preview"> </div>
</div>
<script>
$(document).ready(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#preview').submit(function(e)
{
e.preventDefault();
var formData = new FormData(this);
let TotalImages = $('#images')[0].files.length; //Total Images
let images = $('#images')[0];
for (var i = 0; i < TotalImages; i++) {
formData.append('images' + i, images.files[i]);
}
formData.append('TotalImages', TotalImages);
$.ajax({
type:'POST',
url: "{{ url('upload')}}",
data: formData,
cache:false,
contentType: false,
processData: false,
success: (data) => {
console.log(data);
this.reset();
$('#message').css('display', 'block');
$('#message').html(data.message);
setTimeout(function() {
$('#message').fadeOut('slow');
}, 5000);
$("#table_id").load(location.href + " #table_id");
},
error: function(data){
}
});
});
});
</script>
</script>
</body>
</html>
function store(Request $request)
{
$input = $request->all();
if($request->TotalImages > 0)
{
$validatedData = $request->validate([
'images' => 'required',
'images.*' => 'mimes:jpg,png,jpeg,gif,svg'
]);
if($request->TotalImages > 0)
{
for ($x = 0; $x < $request->TotalImages; $x++) {
$i=1;
if ($request->hasFile('images'.$x)) {
$file = $request->file('images'.$x);
$filename = $file->getClientOriginalName();
$extension = $file->getClientOriginalExtension();
$picture = date('His').'-'.$filename;
$file->move(public_path('images/'), $picture);
$postArray = ['images' => $picture];
$value = Image::create($postArray);
}
}
$dataval = Image::select('*')->get();
return response()->json([
'message' => 'Multiple Image Inserted Successfully..',
'data' => $dataval,
]);
}
else
{
return response()->json(["message" => "Media missing."]);
}
}
}
Route::post('upload', 'ImageController@store');