效果：
<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" th:href="@{/css/layui/css/layui.css}" media="all">
<title>Title</title>
</head>
<body>
<!--图片上传页面-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>选完文件后不自动上传</legend>
</fieldset>
<!--<div class="layui-upload">-->
<!-- <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>-->
<!-- <button type="button" class="layui-btn" id="test9">开始上传</button>-->
<!--</div>-->
<!--<div class="layui-form-item">-->
<!-- <label class="layui-form-label">上传蛋糕图片</label>-->
<!-- <div class="layui-input-inline uploadHeadImage">-->
<!-- <div class="layui-upload-drag" id="test8">-->
<!-- <i class="layui-icon"></i>-->
<!-- <p>点击上传图片，或将图片拖拽到此处</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="layui-input-inline">-->
<!-- <div class="layui-upload-list">-->
<!--<!– <img class="layui-upload-img headImage" src="http://t.cn/RCzsdCq" id="demo1">–>-->
<!--<!– <p id="demoText"></p>–>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->
<form class="layui-form">
<div class="layui-form-item">
<!-- <label class="layui-form-label">尾灯名称</label>-->
<!-- <div class="layui-input-block">-->
<!-- <input type="text" name="name" required lay-verify="required" placeholder="蛋糕图片" class="layui-input">-->
<!-- </div>-->
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn" id="upload">
<i class="layui-icon"></i>上传图片
</button>
<br><br>
<!-- 图片预览 layui-upload-list -->
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图：
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" id="commit" onclick="return false">立即提交</button>
</div>
</div>
</form>
<script src="/static/build/layui.js" th:src="@{/css/layui/layui.js}"></script>
<script>
layui.use(['form', 'layer', 'upload'], function () {
var layer = layui.layer;
var upload = layui.upload;
var $ = layui.jquery;
upload.render({
elem: '#upload',
url: '/lyr/manager/upload',
auto: false,//选择文件后不自动上传
bindAction: '#commit',
//上传前的回调
before: function () {
this.data = {
name: $('input[name="name"]').val()
}
},
//选择文件后的回调
choose: function (obj) {
obj.preview(function (index, file, result) {
$('#demo2').append('<img width="300px" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
})
},
//操作成功的回调
done: function (res, index, upload) {
var code = res.code === 0 ? 1 : 2;
layer.alert(res.msg, {icon: code}, function () {
parent.window.location.reload();
})
},
//上传错误回调
error: function (index, upload) {
layer.alert('上传失败！' + index);
}
});
})
</script>
</body>
</html>
后端代码，基于 springboot
因为第一次用，很多东西套文档的，所以不是很熟，先记个笔记
/**
* String path = Objects.requireNonNull(Objects.requireNonNull(ClassUtils.getDefaultClassLoader())
* .getResource(""))
* .getPath()+"/static/";
* log.info(path);
*
* @param file
* @return
*/
@PostMapping("/lyr/manager/upload")
@ResponseBody
public String upload(@RequestParam("file")MultipartFile[] file)
{
System.out.println(file[0].getOriginalFilename());
System.out.println(file[0].getName());
log.info("图片上传成功");
return "/manager/success";
}
