I have one problem in my code. when I click on update button it does not upload an image in backend and in console message success is passed but image value it return null. can anyone fix this solution. I would be very grateful if you could this. Here I have paste my blade code with script plz check this
<div class="row">
@foreach($client as $clie)
<div class="col-4">
<div class="form-group">
<label for="clientimage">Logo #{{$loop->index+1}}</label>
<input type="file" class="form-control-file" name="image" id="clientimage{{$clie->id}}">
<small id="emailHelp" class="form-text text-muted">JPEG, PNG only</small>
</div>
<button type="submit" class="btn btn-primary float-right" onclick="updateImage({{$clie->id}})">update</button>
</div>
@endforeach
</div>
THis is my script code
<script>
function updateImage(id){
var image = $('#clientimage' + id).val();
// var subtext = $('#subtext').val();
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type: 'PUT',
dataType: 'json',
data: {image:image},
url: `/cms/companyClient/${id}`,
success: function( _response ){
console.log(_response);
console.log("file uploaded");
},
error: function( _response ){
console.log(_response);
}
});
}
</script>
try it my code
<script type="text/javascript">
$(document).ready(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#image').change(function(){
let reader = new FileReader();
reader.onload = (e) => {
$('#image_preview_container').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
});
$('#upload_image_form').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type:'POST',
url: "{{ url('your ulr')}}",
data: formData,
cache:false,
contentType: false,
processData: false,
success: (data) => {
this.reset();
alert('Image has been uploaded successfully');
},
error: function(data){
console.log(data);
}
});
});
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.