图片上传 - 单张/图标/头像等 - 无缩略图

<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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值