js的多图片上传控件
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>其中一些参数如下：