Cropper.js从前台到后台的完整实例应用

最新推荐文章于 2024-08-09 07:15:36 发布

chenlkissmm

最新推荐文章于 2024-08-09 07:15:36 发布

阅读量3.3k

点赞数

本文链接：https://blog.csdn.net/chenlkissmm/article/details/80787871

版权

本文记录了使用Cropper.js插件进行图片裁剪，并通过Ajax调用Servlet实现上传图片的全过程，包括前端HTML主体结构、Ajax调用及后端上传方法。还展示了手机上的实际效果。

摘要由CSDN通过智能技术生成

插件很完善，可惜API都是英文看不懂，折腾一天用原demo改出来，这里记下笔记。

先是html主体

<html lang="zh-CN">
<head>
<link href="../../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../../assets/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<link href="../../assets/plugins/cropper/cropper.min.css" rel="stylesheet">
</head>
<body>
	<div id="main-wrapper">
		<div class="page-wrapper">
			<div class="container-fluid">
				<div class="card">
					<div class="row p-10">
						<div class="col-md-8 p-b-10">
							<div class="img-container">
								<img id="image" src="${sessionScope.headimageurl}" alt="Picture">
							</div>
						</div>
						<div class="col-md-4 docs-buttons">
							<div class="docs-preview clearfix">
								<div class="img-preview preview-lg"></div>
								<div class="img-preview preview-md"></div>
								<div class="img-preview preview-sm"></div>
								<div class="img-preview preview-xs"></div>
							</div>
							<div class="btn-group">