程序猿日常小结：Layui图片上传

近来在做Layui的图片上传总结了一点经验，可以参考layui官方文档
ps:只是上传到项目本地的文件夹
第一步：首先要在项目下创建个文件夹（upload）

第二步：JS代码

//图片上传
layui.use(‘upload’,
function() {
var $ = layui.jquery,
upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: ‘#test1’,
//auto: false,
//bindAction: ‘#upd’, //指定一个按钮触发上传
url: ‘${ctx}/reception/uploaddo.do’,
accept: ‘images’,
choose: function(obj){//选择文件后的回调函数
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result) {
$(’#demoimg’).attr(‘src’, result); //图片链接（base64）
});
},
before: function(obj) {//文件提交上传前的回调
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result) {
$(’#demoimg’).attr(‘src’, result); //图片链接（base64）
});
},
done: function(res) {//执行上传请求后的回调
//如果上传失败
if (res.code > 0) {
return layer.msg(res.msg);
}
else{
$("#picture").val(res.path);//回调图片保存路径，放在隐藏的文本框中，form表单一起提交
$(’#demoimg’).attr(‘src’, res.path);
}
//上传成功
},
error: function() {
//演示失败状态，并实现重传
var demoText = $(’#demoText’);
demoText.html(‘上传失败 重试’);
demoText.find(’.demo-reload’).on(‘click’,
function() {
uploadInst.upload();
});
}
});
})
第三步：服务端代码

public String upload(@RequestParam(required = false) MultipartFile file,
		HttpServletRequest request) throws Exception {
	JSONObject json = new JSONObject();
	json.put("code", "");
	json.put("msg", "");
	String msg="";
	int code=0;
	try {
		// 使用UUID给图片重命名，并去掉四个“-”
		String name = UUID.randomUUID().toString().replaceAll("-", "");
		// 获取文件的扩展名
		String ext = FilenameUtils.getExtension(file.getOriginalFilename());
		// 设置图片上传路径
		String url = request.getSession().getServletContext()
				.getRealPath("/upload");
		file.transferTo(new File(url + "/" + name + "." + ext));
		String path = "upload/" + name + "." + ext;	
		json.put("path",path);
		json.put("data", url);
		msg="上传成功";
		code=0;
	} catch (Exception e) {
		msg="上传失败";
		code=1;
	}
	json.put("code", code);
	json.put("msg", msg);
	return json.toString();
}