<div class="col-md-4 br-1 border-lighter">
<input name="avatar_file" type="hidden" value="<?php echo $this->case_info['avatar_file']; ?>" />
<img class="case-avatar" src="<?php echo get_size($this->case_info['avatar'], 'max'); ?>" alt="<?php echo $this->case_info['title']; ?>" />
<div class="text-center py-30">
<button class="btn btn-secondary btn-sm btn-outline" data-toggle="modal" data-target="#modal-avatar">上传案例封面</button>
</div>
</div>
<div class="modal modal-center fade" id="modal-avatar" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content w-600px">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title" id="avatar-modal-label">案例封面 <small class="text-danger">(最小200x200,最大2M)</small></h5>
</div>
<div class="modal-body no-padding" data-provide="cropit" data-image-background="true">
<form id="form_cover" data-provide="form" action="/package/system/<?php echo $this->package_info['id']; ?>/detail/_set_icon/" onsubmit="return false;">
<input name="category" value="package_icon" type="hidden">
<input name="output" value="l" type="hidden">
<input name="data" type="hidden">
<div class="card no-margin">
<div class="card-content" style="overflow:hidden">
<div class="cropit-preview w-200px h-200px mx-auto my-50 shadow-1"></div>
</div>
<footer class="card-footer flexbox py-20 align-items-center">
<div class="file-group file-group-inline">
<button type="button" class="btn btn-info btn-sm btn-outline file-browser">上传图片</button>
<input type="file" name="image" class="cropit-image-input" />
</div>
<div class="btn-group btn-group-sm btn-rotate">
<button type="button" class="btn btn-light"><i class="fa fa-rotate-left"></i></button>
<button type="button" class="btn btn-light"><i class="fa fa-rotate-right"></i></button>
</div>
<span>
<input type="range" class="cropit-image-zoom-input" />
</span>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-light btn-cancel" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary btn-save" disabled="disabled">保存</button>
</div>
</footer>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$('#form_cover').on('finish', function (e, cropper, data) {
$('img.case-avatar').attr('src', data.url);
$('input[name="avatar_file"]').val(data.val);
$('#modal-avatar').modal('hide');
});
</script>
图片上传 - 单张/图标/头像等 - 无缩略图
最新推荐文章于 2024-09-05 14:01:36 发布