js的多图片上传控件

沐雪架构师

于 2020-09-06 16:31:53 发布

阅读量1.2k

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/puzi0315/article/details/108433102

版权

html5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

git地址：https://github.com/cuuuuuirz/cupload

应该是一个国产，非常好用的一个控件，而且很美观。

基于原生js的图片上传插件。支持预览、像素限制、大小限制、多图上传、放大预览、异步上传、编辑初始化图片.

该方法将图片转为base64格式存到了input中，用户只要使用普通form表单直接提交即可，其中 name参数可以设置提交的input的name值，后台接收form表单的参数后，该图片数据格式为数组，只要循环将base64数据转为图片存到本地即可。

效果如下：

步骤如下：

1、引入js

<script src="static/js/cupload.js"></script>

2、在需要的位置添加html，id可以自定义：

<div id="cupload"></div>

3、实例化cupload对象：

<script type="text/javascript">
	var cupload = new Cupload ({
		ele: "#cupload"
	});
</script>

可选参数
//为方便比较和计算,部分参数为number型,已设置默认单位,不可再带单位。

{
	ele		: "#cupload",		// 实例化的DOM对象id,必需,默认为cupload
	name		: "image",		// 图片input的name名,非必需,默认为image
	num		: 1,			// 可上传图片的数量,非必需,默认为1
	url		: "./upload.php", //异步上传url
	width		: 148,			// 预览框的宽,单位为px,非必需,默认为148
	height		: 148,			// 预览框的高,单位为px,非必需,默认为148
	minSize		: 1024,			// 图片大小最小限制,单位为KB,非必需,无默认值
	maxSize		: 2048,			// 图片大小最大限制,单位为KB,非必需,无默认值
	limitedSize	: 2048,			// 图片大小要求,单位为KB,非必需,无默认值
	minWidth	: 100,			// 图片宽度最小限制,单位为px,非必需,无默认值
	minHeight	: 100,			// 图片高度最小限制,单位为px,非必需,无默认值
	maxWidth	: 2000,			// 图片宽度最大限制,单位为px,非必需,无默认值
	maxHeight	: 2000,			// 图片高度最大限制,单位为px,非必需,无默认值
	limitedWidth	: 800,			// 图片宽度要求,单位为px,非必需,无默认值
	limitedHeight	: 800,			// 图片高度要求,单位为px,非必需,无默认值
	data		: ["1.png", "2.jpg"],	// 编辑模式下初始显示的图片路径,非必需,无默认值
}

demo的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>cupload</title>
	</head>
	<body>
		<p>简单使用</p>
		<div id="cupload-1"></div>
		<p>多图上传(3张)</p>
		<div id="cupload-2"></div>
		<p>异步上传(3张)[请在php环境下运行，否则会出现未知错误]</p>
		<div id="cupload-3"></div>
		<p>大小限制(3张，最大2M)</p>
		<div id="cupload-4"></div>
		<p>像素限制(3张，最大(w*h)800*800)</p>
		<div id="cupload-5"></div>
		<p>初始化加载图片(5张, 已有三张)</p>
		<div id="cupload-6"></div>
	</body>
	<script src="static/js/cupload.js"></script>
	<script type="text/javascript">
		var cupload1 = new Cupload ({
			ele: '#cupload-1',
		});

		var cupload2 = new Cupload ({
			ele: '#cupload-2',
			num: 3,
		});

		var cupload3 = new Cupload ({
			ele	 : '#cupload-3',
			num  : 3,
			url  : './upload.php',
		});

		var cupload4 = new Cupload ({
			ele	 : '#cupload-4',
			num  : 3,
			maxSize: 2048,
		});

		var cupload5 = new Cupload ({
			ele	 : '#cupload-5',
			num  : 3,
			maxWidth: 800,
    		maxHeight: 800,
		});

		var cupload6 = new Cupload ({
			ele	 : '#cupload-6',
			num  : 5,
			data : ["./static/image/1.jpg", "./static/image/2.png", "./static/image/3.png"],
		});


	</script>
</html>

其中一些参数如下：

沐雪架构师

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
js的多图片上传控件

git地址：https://github.com/cuuuuuirz/cupload应该是一个国产，非常好用的一个控件，而且很美观。基于原生js的图片上传插件。支持预览、像素限制、大小限制、多图上传、放大预览、异步上传、编辑初始化图片效果如下：步骤如下：1、引入js<script src="static/js/cupload.js"></script>2、在需要的位置添加html，id可以自定义：<div id="cupload">
复制链接

扫一扫