webuploader + cropper 真正的PC/H5同一页面多实例+裁剪+分片上传asp+demo

xuemu2008

于 2020-11-01 11:54:16 发布

阅读量770

点赞数

分类专栏： webuploader + cropper 文章标签： jquery web css3 javascript html5

本文链接：https://blog.csdn.net/xuemu2008/article/details/109412165

版权

webuploader + cropper 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

这两个插件 webuploader 和 cropper 应该都不陌生了。其功能不做介绍了，本人在实现同一页面多实例带裁剪分片上传功能上也踩过一些坑。网上下载了几个demo，

要命不完整的，要么裁剪后还是上传的原图，居然其缩略图通过formData 接口随带参数方式 request 来发送，浏览器提示数据过长，那是不理想的做法。

这里先说一个 webuploader 对开启 DND 功能后，在同一页面多实例模式可能会有一个小小的bug，自动插入的下面代码多出来的有，网上的所有相关demo都是这样的。不知道是不是 webuploader 在 DND 模块有逻辑问题，没做进一步测试，但不影响使用。

<div id="rt_rt_1em0n87rb14ag10bk11dspnnuh61" style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; overflow: hidden;">
	<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
	<label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);">
	</label>
</div>

好了，先放出我测试用到的各插件版本：

webuploader 0.1.8-alpha（当前最新版）

官方文档：http://fex.baidu.com/webuploader/doc/index.html

项目仓库：https://github.com/fex-team/webuploader

Cropper.js v2.0.0-alpha.1（当前最新版）

项目地址：https://fengyuanchen.github.io/cropper.js

官方文档：https://github.com/fengyuanchen/cropperjs/blob/v2/README.md

我这个的 demo 用到了 Bootstrap v4.5.3 ，我也打包进来了，数据接收端是 asp 写的，如果还有asp做项目的可以参考，其他语言的可以忽略服务端 server.asp 文件了。

看几张图吧【如果看着图片太小，可通过浏览器新标签打开来看】：

【图一：界面】↓

【图二：缩图队列，这里的缩图有两种预览模式可选，即一种是原图缩放后的缩图(按最大边生成)，二种是原图裁剪生成缩图(按最小边边生成) 图三】↓

【图三】↓

【图四：缩图上的功能按钮，在完成裁剪后除了删除按钮，其他按钮移除】↓

【图五：裁剪界面】↓

【图六：裁剪后返回的缩图】↓

【图七：上传进度】↓

【图八：上传结果】↓

【前端页面代码】↓

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>WebUploader演示 + Cropper裁剪 - 支持同一页面多实例</title>
	<link rel="stylesheet" type="text/css" href="bc/webuploader.css" />
	<link rel="stylesheet" type="text/css" href="bc/cropper.min.css" />
	<link rel="stylesheet" type="text/css" href="bc/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="style.css" />

<style>
.xmuploader-views .progress {background-color:transparent;}
.img-container img{/*重要*/ display: block;max-width:100%;max-height:500px;}
#quick-edit .preview{/*重要*/ overflow:hidden;}
p.text-sm{font-size:13px;}
</style>
</head>
<body>
<div class="wrapper">
	<!------------ 实例1 ------------------->
        <div class="xmuploader-views uploder-container" uploder-config="{
			'root'  : '/',
			'result': 'sku-0-images',
			'thumb' :{
				'width' : 120,
				'height': 120
			},
			'crop' : {
				'width' : 800,
				'height': 800
			}
		}">
		<input type="hidden" name="sku-0-images" />
		<div class="queueList">
			<div class="placeholder">
				<div class="btn-addfile">点击选择图片</div>
				<p><!--或将照片拖到这里，单次最多可选300张--></p>
			</div>
		</div>
		<div class="statusBar" style="display:none;">
			<div class="progress">
				<span class="text">0%</span>
				<span class="percentage"></span>
			</div>
			<div class="info"></div>
			<div class="btns">
				<div class="btn-addmore">追加文件</div>
				<div class="uploadBtn">开始上传</div>
			</div>
		</div>
		<div class="alert-msg" style="display:none;"></div>
	</div>

	<!------------ 实例2 ------------------->
        <div class="xmuploader-views uploder-container" uploder-config="{
			'root'  : '/',
			'result': 'sku-1-images',
			'thumb' :{
				'width' : 120,
				'height': 120
			},
			'crop' : {
				'width' : 1200,
				'height': 600
			}
		}">
		<input type="hidden" name="sku-1-images" />
		<div class="queueList">
			<div class="placeholder">
				<div class="btn-addfile">点击选择图片</div>
				<p><!--或将照片拖到这里，单次最多可选300张--></p>
			</div>
		</div>
		<div class="statusBar" style="display:none;">
			<div class="progress">
				<span class="text">0%</span>
				<span class="percentage"></span>
			</div>
			<div class="info"></div>
			<div class="btns">
				<div class="btn-addmore">追加文件</div>
				<div class="uploadBtn">开始上传</div>
			</div>
		</div>
		<div class="alert-msg" style="display:none;"></div>
	</div>
</div>
<div id="quick-edit" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">裁剪图片</h5>
				<button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="row" style="padding:15px;">
					<div class="col-sm-8 col-12">
						<div class="img-container">
							<img src="" id="image_cropper" alt="Picture">
						</div>
					</div>
					<div class="col-sm-4 col-12">
						<div class="row">
							<div class="col-6" style="padding-right:6px;">
								<div class="preview"></div>
							</div>
							<div class="col-4" style="padding-left:6px;padding-right:6px;">
								<div class="preview"></div>
							</div>
							<div class="col-2" style="padding-left:6px;">
								<div class="preview"></div>
							</div>
						</div>
						<div class="col-12 mt-2">
							<div class="icheck-hope d-inline mb-3">
								<input type="radio" value="1" name="image-crop-type" id="image-crop-type-1" checked />
								<label for="image-crop-type-1"><b>裁剪图片</b></label>
							</div>
							<p class="text-secondary text-sm" style="text-indent:2rem;">虚线框内为裁剪范围</p>
						</div>
						<div class="col-12 mb-1">
							<div class="icheck-danger d-inline mb-3">
								<input type="radio" value="2" name="image-crop-type" id="image-crop-type-2" />
								<label for="image-crop-type-2"><b>留白边</b></label>
							</div>
							<p class="text-secondary text-sm" style="text-indent:2rem;">不裁剪，虚线内如果有白边，保存后也会有白边</p>
						</div>
						<div class="col-12 text-secondary">
							<p class="text-sm">说明：裁剪图片/留白边功能没做，按照cropper的接口做即可。</p>
						</div>
						<div class="col-12 mb-1">
							<div class="btn-group btn-group-sm" role="group">
								<span role="button" class="btn btn-sm btn-dark btn-crop-tool" data-method="rotate" data-option="-90">逆转90°</span>
								<span role="button" class="btn btn-sm btn-dark btn-crop-tool" data-method="rotate" data-option="90">顺转90°</span>
								<span role="button" class="btn btn-sm btn-dark btn-crop-tool" data-method="zoom"   data-option="-0.1">缩小</span>
								<span role="button" class="btn btn-sm btn-dark btn-crop-tool" data-method="zoom"   data-option="0.1">放大</span>
							</div>
						</div>
					</div>
					<div class="col-12 mt-3 text-center">
						<button type="button" class="btn btn-sm btn-success btn-crop-reset">还原</button>
						<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-sm btn-danger btn-isok">确定</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

	<script type="text/javascript" src="bc/jquery.min.js"></script>
	<script type="text/javascript" src="bc/bootstrap.bundle.min.js"></script>
	<script type="text/javascript" src="bc/webuploader.min.js"></script>
	<script type="text/javascript" src="bc/cropper.min.js"></script>
	<script type="text/javascript" src="xm.uploader.sm.js"></script>

</body>
</html>

【前端配置说明】↓

	<!------------ 实例1 ------------------->
        <div class="xmuploader-views uploder-container" uploder-config="{
			'root'  : '/',
			'result': 'sku-0-images',
			'thumb' :{
				'width' : 120,
				'height': 120
			},
			'crop' : {
				'width' : 800,
				'height': 800
			}
		}">

每一个实例按此分开配置即可，自己也可以扩展。

root：站点安装目录，一般为“/”即可，result：是要返回上传后的地址的input的name，thumb：预览图尺寸，crop：图片裁剪后要保存的尺寸。

两种预览图生成模式可自己扩展进前端页面配置选择：