图片上传(多图)


代码(base64)
<!--块元素-->
<div class="block">
	<!--正文内容-->
	<div class="main">
		<a href="javascript:;" class="file-container button indigo">
			选择图片
			<input type="file" class="file" id="upload" multiple accept="image/gif, image/jpeg, image/jpg, image/png" />
		</a>
		<!--分割线-->
		<p class="divider"></p>
		<!-- 图片存储容器 -->
		<ul id="container" class="clear"></ul>
	</div>
</div>

<script>
	javaex.upload({
		type : "images",
		id : "upload",	// <input type="file" />的id
		containerId : "container",	// 图片承载容器的id
		maxNum : 3,			// 文件上传数量上限
		imgUrl : null,		// 回显图片(包含图片地址的 数组 或 List。切记:不能用引号包裹起来)
		width : 120,		// 显示的小图的宽度(单位:像素)
		height : 120,		// 显示的小图的高度(单位:像素)
		dataType : "base64",	// 返回的数据类型:base64
		callback : function (rtn) {
			// 返回图片的base64数组,初始化回显图片也会返回
			console.log(rtn);
		}
	});
</script>

代码(url)
<!--块元素-->
<div class="block">
	<!--正文内容-->
	<div class="main">
		<a href="javascript:;" class="file-container button indigo">
			选择图片
			<input type="file" class="file" id="upload" multiple accept="image/gif, image/jpeg, image/jpg, image/png" />
		</a>
		<!--分割线-->
		<p class="divider"></p>
		<!-- 图片存储容器 -->
		<ul id="container" class="clear"></ul>
	</div>
</div>

<script>
	javaex.upload({
		type : "images",
		id : "upload",	// <input type="file" />的id
		containerId : "container",	// 图片承载容器的id
		image : {
			url : "http://127.0.0.1/qiniu/uploadImage.json",	// 请求路径
			rtn : "rtnData",	// 后台返回的数据对象,在前面页面用该名字存储
			imgUrl : "data.imgUrl",	// 根据返回的数据对象,获取图片地址。  例如后台返回的数据为:{code: "000000", message: "操作成功!", data: {imgUrl: "1.jpg"}}
			prefix : ""	// 图片地址的前缀,根据实际情况决定是否需要填写
		},
		param : "file",		// 参数名称,SSM中与MultipartFile的参数名保持一致
		maxNum : 3,		// 文件上传数量上限
		imgUrl : null,		// 回显图片(包含图片地址的 数组 或 List。切记:不能用引号包裹起来)
		width : 120,		// 显示的小图的宽度(单位:像素)
		height : 120,		// 显示的小图的高度(单位:像素)
		dataType : "url",	// 返回的数据类型:url
		callback : function (rtn) {
			// 返回图片的url数组,初始化回显图片也会返回
			console.log(rtn);
		}
	});
</script>

参数说明(使用属性默认值时,可以缺省该属性)
序号 属性名 默认值 说明
1 type 必须是 images
2 id <input type="file" />的id
3 containerId 图片承载容器的id
4 image 图片上传的一些属性设置
image : {
url : "${pageContext.request.contextPath}/upload/upload.json", // 请求路径
rtn : "rtnData", // 后台返回的数据对象,在前面页面用该名字存储
imgUrl : "data.imgUrl", // 根据返回的数据对象,获取图片地址。 例如后台返回的数据为:{code: "000000", message: "操作成功!", data: {imgUrl: "1.jpg"}}
prefix : "/upload/" // 图片地址的前缀,根据实际情况决定是否需要填写
}
5 param file 参数名称,SSM中与MultipartFile的参数名保持一致
6 maxNum 文件上传数量上限
7 maxSize 单张图片的大小上限,单位KB,0或空为不限制
8 imgUrl 回显图片(包含图片地址的 数组 或 List。切记:不能用引号包裹起来)
9 width 100 显示的小图的宽度(单位:像素)
10 height 100 显示的小图的高度(单位:像素)
11 dataType base64 返回的数据类型:base64或url(将图片上传到服务器)
12 callback 返回图片的base64数组

java回显图片示例
// 依赖jar包
<!-- list集合转json格式 -->
<dependency>
	<groupId>net.sf.json-lib</groupId>
	<artifactId>json-lib</artifactId>
	<version>2.4</version>
	<classifier>jdk15</classifier>
</dependency>

// java代码
import net.sf.json.JSONArray;

// 转为json格式,方便js调用
JSONArray jsonList = JSONArray.fromObject(imgList);
map.put("jsonList", jsonList);

// 前台js回显
<script>
	var imgList = eval('${jsonList}');
	javaex.upload({
		type : "images",
		id : "upload",	// <input type="file" />的id
		containerId : "container",	// 图片承载容器的id
		maxNum : 5,			// 文件上传数量上限
		imgUrl : imgList,		// 回显图片(包含图片地址的 数组 或 List。切记:不能用引号包裹起来)
		width : 120,		// 显示的小图的宽度(单位:像素)
		height : 120,		// 显示的小图的高度(单位:像素)
		dataType : "base64",	// 返回的数据类型:base64
		callback : function (rtn) {
			console.log(rtn);
		}
	});
</script>