0
ユースケースは、ユーザーがプロフィール画像として新しい画像をアップロードできることです。私はこれにfileinput jQueryプラグインを使用しました。写真とデータベースへのパスをアップロードして、必要な場所に表示することができます。画像のクローズアイコンを非表示にする
画像がアップロードされた後、画像の右上にある閉じるアイコンをクリックして画像を削除するオプションが表示されます。
ユーザーがユーザーイメージを削除すると、既定のイメージが表示されます。私が必要とするのは、既定のイメージが表示されている（ユーザーがイメージをアップロードしていない）ときにクローズアイコンを表示しないことです。閉じるアイコンは、アップロード中に画像のプレビューにのみ表示され、アップロードされた画像は削除されます。私は混乱しないことを願っています。私はこのためにjQueryのfileinputプラグインを使用しています。
ここに、ビューファイルのコードを示します。
ファイル入力jQueryプラグインの入力。
<div id="kv-avatar-errors-2" class="" style="position:absolute; left:80px; top:20px;width:800px;display:none"></div>
<div class="kv-avatar" style="width:200px">
<input id="avatar-2" name="userprofile" type="file" class="file-loading">
</div>
これは私が書いたスクリプトです。
var img = '<?php echo $user_img ?>';
if(img)
{
var image = '<img src="/'+img+'" alt="Your Avatar" style="width:100px">';
}
else
{
var image = '<img src="/uploads/profile_pics/default_avatar_male.jpg" alt="Your Avatar" style="width:100px">';
}
<?php if(isset($editMode) && !empty($editMode)) {?>
fileInput(image);
<?php } ?>
$('.close').click(function() {
var userId = '<?php echo $user_id ?>';
var image_path = '<?php echo $user_img ?>';
jQuery.ajax({
type: "POST",
url: "<?php echo site_url('Users/deleteProfileImage') ?>",
data: {user_id: userId, dp: image_path},
dataType: 'json',
success: function(response) {
var image = '<img src="/uploads/profile_pics/default_avatar_male.jpg" alt="Your Avatar" style="width:100px">';
$(".file-default-preview").html(image);
document.querySelector(".close").style.display="none";
}
});
});
});
function fileInput(image){
$("#avatar-2").fileinput({
overwriteInitial: true,
maxFileSize: 1500,
showClose: true,
showZoom: false,
showCaption: false,
showBrowse: false,
browseOnZoneClick: true,
removeLabel: '',
removeIcon: '<i class="glyphicon glyphicon-remove"></i>',
removeTitle: 'Cancel or reset changes',
elErrorContainer: '#kv-avatar-errors-2',
msgErrorClass: 'alert alert-block alert-danger',
defaultPreviewContent: image + '<h6 class="text-muted">Click to select</h6>',
layoutTemplates: {main2: '{preview} {browse}'},
allowedFileExtensions: ["jpg", "png", "gif"]
});
}
閉じるアイコンのクラスは.closeです。