使用SSM框架完成layui的多图片上传

1.pox文件

<dependency>
	<groupId>commons-fileupload</groupId>
	<artifactId>commons-fileupload</artifactId>
	<version>1.2.1</version>
</dependency>

2.Controller层

	public String landUpdate(@RequestParam MultipartFile file, Landlord land) {
		if (!file.isEmpty()) {
			String originalFilename = file.getOriginalFilename();
			long size = file.getSize();
			System.out.println("上传文件名为" + originalFilename + ",上传大小为" + size);
			//uuid是机器码，是唯一的
			String uuid = UUID.randomUUID().toString();
			//获取后缀名
			int lastIndexOf = originalFilename.lastIndexOf(".");
			String substring = originalFilename.substring(lastIndexOf);
			//设置保存路径
			String filenames = "D:/imger/" + uuid + substring;
			File files = new File(filenames);
			try {
				file.transferTo(files);
				//往数据库中插入数据
				land.setLandlord_photo(uuid + substring);
				ls.updateLandlord(land);
				// update="1";
			} catch (IllegalStateException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
				// update="2";
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
				// update="2";
			} finally {
				return "redirect:selLandlord.action";
			}
		} else {
			ls.updateLandlord(land);
		}
		return "redirect:selLandlord.action";
	}

3.jsp页面

<link href="你本地layUI所放的地方/layui/css/layui.css" rel="stylesheet">

<div class="ivu-form-item-content">
				<blockquote class="layui-elem-quote">客厅(至少上传1张，尽量显示配套设施（空调、电视等）及客厅全景)</blockquote>
				<div class="layui-upload">
					<button type="button" class="layui-btn" id="test2" name="file" >添加图片</button>
					<blockquote class="layui-elem-quote layui-quote-nm"
						style="margin-top: 10px;">
						预览图：
						<div class="layui-upload-list" id="demo2"></div>
					</blockquote>
				</div>
</div>

<script src="你本地layUI所放的地方/layui/upload.js"></script>
<script>
	layui
		.use(
				'upload',
				function() {
					var $ = layui.jquery,
					upload = layui.upload;
					// 多图片上传
					upload
							.render({
								//div的ID的值
								elem : '#test2',
								//url即指你Controller层的上传图片的方法
								url : 'sixUpload.action',
								acceptMime: 'image/jpg, image/png',
								multiple : true,
								before : function(obj) {
									// 预读本地文件示例，不支持ie8
									obj
											.preview(function(index, file,
													result) {
												$('#demo2')
														.append(
																'<img  src="'
																		+ result
																		+ '" alt="'
																		+ file.name
																		+ '" class="layui-upload-img" width="250px;">&nbsp;&nbsp;&nbsp;')
											});
								},
								done : function(res) {
								}
							});
			});
</script>

就这样layui的多图片上传就完成了，归根结底layui的多图片上传其实是一张一张上传的，仔细一想还是挺简单的。