1.in html file
<span class="avatar avatar-xl mb-3 avatar-rounded" id="profile-image" style="background-image: url({{ asset('assets/avatars/'.auth()->user()->avatar) }})">
<img id="change-avatar" src="{{ asset('assets/images/add-image.png') }}" alt="Şəkili dəyiş" style="position: absolute;float: right;bottom: 0;right: 0;width: 30px;cursor: pointer">
</span>
<input type="file" name="avatar" id="profile-avatar" style="display: none">
2.in js file
$(document).ready(function () {
$('#change-avatar').click(function () {
$('#profile-avatar').click();
});
$( 'input[type=file]' ).change( function ( event ) {
let val = $( this ).val().toLowerCase(),
regex = new RegExp( '(.*?)\.(png|jpeg|jpg)$' );
if ( $( this )[ 0 ].files.length !== 1 )
{
$( this ).val( '' );
toastr.error( 'Yalnız png, jpeg, jpg formatda şəkillər əlavə edə bilərsiniz' );
$( '#profile-image' ).attr( 'src', '/assets/avatars/avatar.png' );
$( '#top-profile-image' ).attr( 'src', '/assets/avatars/avatar.png' );
$( '#sidebar-profile-preview' ).attr( 'src', '/assets/avatars/avatar.png' );
}
else if ( ! ( regex.test( val ) ) )
{
$( this ).val( '' );
toastr.error( 'Yalnız png, jpeg, jpg formatda şəkillər əlavə edə bilərsiniz' );
$( '#profile-image' ).attr( 'src', '/assets/avatars/avatar.png' );
$( '#top-profile-image' ).attr( 'src', '/assets/avatars/avatar.png' );
$( '#sidebar-profile-preview' ).attr( 'src', '/assets/avatars/avatar.png' );
}
else
{
$( '#profile-image' ).attr( 'src' );
$( '#top-profile-image' ).attr( 'src' );
let reader = new FileReader();
reader.onload = function () {
$("#nav-avatar").css("background-image", "url(" + reader.result + ")");
$("#profile-image").css("background-image", "url(" + reader.result + ")");
};
let img = new Image()
img.src = window.URL.createObjectURL(event.target.files[0])
img.onload = () => {
reader.readAsDataURL( event.target.files[ 0 ] );
}
var property = document.getElementById('profile-avatar').files[0];
var form_data = new FormData();
form_data.append('file', property);
let url = $('#profile_avatar_upload').val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type : 'POST',
data : form_data,
url : url,
cache: false,
processData: false,
contentType: false,
success : function () {
toastr.success('Profil şəkili uğurla əlavə edildi')
},
error : function (myErrors) {
$.each(myErrors.responseJSON.errors,function (key, value) {
toastr.error(value,'Xəta');
})
}
});
}
} );
});
3.in php file
public function avatarUpload(Request $request)
{
$this->validate($request,[
'file' => 'image|mimes:jpeg,png,jpg|max:2000'
],[],[
'file'=>'Şəkil'
]);
$file = $request->file('file');
$user = User::whereId(auth()->user()->id)->first();
if (File::exists('assets/avatars/'.$user->avatar))
{
if ($user->avatar != 'avatar.png')
{
File::delete('assets/avatars/'.$user->avatar);
}
}
$filename = pathinfo( $file->getClientOriginalName(), PATHINFO_FILENAME );
$extention = $file->getClientOriginalExtension();
$new_name = $filename . '-' . time() . '.' . $extention;
$image_resize = Image::make($file->getRealPath());
$image_resize = $image_resize->orientate();
$image_resize->resize(200, null, function ($constraint) {
$constraint->aspectRatio();
$constraint->upsize();
});
$image_resize->save(public_path('assets/avatars/' .$new_name));
User::whereId(auth()->user()->id)->update([
'avatar'=>$new_name
]);
}
Digər dildə:
EN