<div class="image-input image-input-outline" id="kt_image_1"> <div class="image-input-wrapper" style="background-image: url(assets/media/users/100_1.jpg)"></div> <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar"> <i class="fa fa-pen icon-sm text-muted"></i> <input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg"/> <input type="hidden" name="profile_avatar_remove"/> </label> <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar"> <i class="ki ki-bold-close icon-xs text-muted"></i> </span> </div>
var avatar1 = new KTImageInput('kt_image_1');
<div class="image-input" id="kt_image_2"> <div class="image-input-wrapper" style="background-image: url(assets/media/users/100_2.jpg)"></div> <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar"> <i class="fa fa-pen icon-sm text-muted"></i> <input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg"/> <input type="hidden" name="profile_avatar_remove"/> </label> <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar"> <i class="ki ki-bold-close icon-xs text-muted"></i> </span> </div>
var avatar2 = new KTImageInput('kt_image_2');
<div class="image-input image-input-outline image-input-circle" id="kt_image_3"> <div class="image-input-wrapper" style="background-image: url(assets/media/users/100_3.jpg)"></div> <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar"> <i class="fa fa-pen icon-sm text-muted"></i> <input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg"/> <input type="hidden" name="profile_avatar_remove"/> </label> <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar"> <i class="ki ki-bold-close icon-xs text-muted"></i> </span> </div>
var avatar3 = new KTImageInput('kt_image_3');
<div class="image-input image-input-outline" id="kt_image_4" style="background-image: url(assets/media/>users/blank.png)"> <div class="image-input-wrapper" style="background-image: url(<?php echo Page::getMediaPath();?>users/100_1.jpg)"></div> <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar"> <i class="fa fa-pen icon-sm text-muted"></i> <input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg"/> <input type="hidden" name="profile_avatar_remove"/> </label> <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar"> <i class="ki ki-bold-close icon-xs text-muted"></i> </span> <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="remove" data-toggle="tooltip" title="Remove avatar"> <i class="ki ki-bold-close icon-xs text-muted"></i> </span> </div>
var avatar4 = new KTImageInput('kt_image_4'); avatar4.on('cancel', function(imageInput) { swal.fire({ title: 'Image successfully canceled !', type: 'success', buttonsStyling: false, confirmButtonText: 'Awesome!', confirmButtonClass: 'btn btn-primary font-weight-bold' }); }); avatar4.on('change', function(imageInput) { swal.fire({ title: 'Image successfully changed !', type: 'success', buttonsStyling: false, confirmButtonText: 'Awesome!', confirmButtonClass: 'btn btn-primary font-weight-bold' }); }); avatar4.on('remove', function(imageInput) { swal.fire({ title: 'Image successfully removed !', type: 'error', buttonsStyling: false, confirmButtonText: 'Got it!', confirmButtonClass: 'btn btn-primary font-weight-bold' }); });
<div class="image-input image-input-empty image-input-outline" id="kt_image_5" style="background-image: url(assets/media/users/blank.png)"> <div class="image-input-wrapper"></div> <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar"> <i class="fa fa-pen icon-sm text-muted"></i> <input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg"/> <input type="hidden" name="profile_avatar_remove"/> </label> <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar"> <i class="ki ki-bold-close icon-xs text-muted"></i> </span> <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="remove" data-toggle="tooltip" title="Remove avatar"> <i class="ki ki-bold-close icon-xs text-muted"></i> </span> </div>
var avatar5 = new KTImageInput('kt_image_5'); avatar5.on('cancel', function(imageInput) { swal.fire({ title: 'Image successfully changed !', type: 'success', buttonsStyling: false, confirmButtonText: 'Awesome!', confirmButtonClass: 'btn btn-primary font-weight-bold' }); }); avatar5.on('change', function(imageInput) { swal.fire({ title: 'Image successfully changed !', type: 'success', buttonsStyling: false, confirmButtonText: 'Awesome!', confirmButtonClass: 'btn btn-primary font-weight-bold' }); }); avatar5.on('remove', function(imageInput) { swal.fire({ title: 'Image successfully removed !', type: 'error', buttonsStyling: false, confirmButtonText: 'Got it!', confirmButtonClass: 'btn btn-primary font-weight-bold' }); });
