使⽤Layui上传⽂件与表单⼀起提交
思路：先提交form，成功后触发上传图⽚按钮（隐藏）
⼀、html
<div class="layui-row " >
<form class="layui-form"action="">
老龙头
<div class="layui-upload layui-col-md4 layui-col-space30" >
<label class="layui-form-label" >图书封⾯</label>
<div class="layui-upload-list ">
<p id="demoText"></p>
<div ><img class="layui-upload-img"id="demo1"></div> </div>
<button type="button"class="layui-btn"id="test1" >选择图⽚</button>
<button id="hideUpload"type="button" ></button>
</div>
<div class="layui-col-md7 layui-col-space10 " >
<div class="layui-form-item">
<label class="layui-form-label">ID</label>
<div class="layui-input-inline" >
<input id="bookId"lay-verify="number"type="text"name="bookId"placeholder="请输⼊图书Id(唯⼀)"
autocomplete="off"class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">书名</label>
<div class="layui-input-inline" >
<input required lay-verify="required"id="bookName"type="text"name="bookName"
placeholder="请输⼊书名"autofocus
class="layui-input"autocomplete="off">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">作者</label>
<div class="layui-input-inline" >
<input id="bookAuthor"lay-verify="required"type="text"name="bookAuthor"placeholder="请输⼊作者"
autocomplete="off"class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">出版社</label>
<div class="layui-input-inline" >
<input id="publish"lay-verify="required"type="text"name="publish"
placeholder="请输⼊出版社"autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">页数</label>
<div class="layui-input-inline" >
<input id="pages"lay-verify="number"type="text"name="pages"
placeholder="请输⼊页数"autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-item">
<label class="layui-form-label">价格</label>
<div class="layui-input-inline" >
<input id="price"lay-verify="number"type="text"name="price"placeholder="￥"
autocomplete="off"class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">评分</label>
<div class="layui-input-inline" >
<input id="bookGrade"lay-verify="number"type="text"name="bookGrade"暴雷漏洞
placeholder="请输⼊评分"autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">ISBN</label>
<div class="layui-input-inline" >
<input id="isbn"lay-verify="required"type="text"name="isbn"
placeholder="请输⼊ISBN"autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">简介</label>
中医五味<div class="layui-input-inline" >
<textarea id="bookIntro"lay-verify="required"name="bookIntro"placeholder="请输⼊简介"
class="layui-textarea "
autocomplete="off"></textarea>
</div>
</div>
</div>
<div class="layui-form-item layui-row">
<div class="layui-input-block" >
<button class="layui-btn"lay-submit=""lay-filter="submit"id="add">⽴即提交</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
星座英文名⼆、js
layui.u(["jquery","upload","form","layer","element"],function(){
var $ = layui.$,
element = layui.element,
layer = layui.layer,
upload = layui.upload,
form = layui.form;
//监听提交
<('submit(submit)',function(data){
var date =new Date();
subData ={初级的英文
bookId: data.field.bookId,
bookName:data.field.bookName,
bookAuthor: data.field.bookAuthor,
publish: data.field.publish,
pages: data.field.pages,
price: data.field.price,
bookGrade: data.field.bookGrade,
isbn: data.field.isbn,
bookIntro: data.field.bookIntro
}
$.ajax({
type:'post',
url:'/addBook',
data:subData,
success:(res)=>{
de ==0){
// 触发隐藏按的上传按钮
$('#hideUpload').trigger('click');
layer.msg("图书信息提交成功!",{
time:1000
});
}el{
layer.msg("图书信息提交失败!请重新填写！",{
time:3000
},function(){
/
/重新加载页⾯
})
}
},
error:(err)=>{
layer.msg("图书信息提交失败!",{
time:1000
},function(){
//重新加载页⾯
})
}
});
return fal;
});
//图⽚上传
var uploadInst = der({
elem:'#test1'//绑定点击按钮
,url:'/upload'//访问后台路径
,accept:'images'//图⽚格式
,auto:fal//取消⾃动上传
,
method:'post'//请求上传的 http 类型
,bindAction:'#hideUpload'//绑定真正的上传按钮
,data:{//访问后台提交的数据
// name: $('#a').val()
fileName:()=>{
return$('#bookId').val();//官⽅⽂档说明：实现动态传值
}
}
,choo:function(obj){
//预读本地⽂件⽰例，不⽀持ie8
obj.preview(function(index, file, result){
$('#demo1').attr({src: result,width:"220",height:"300"});//图⽚链接（ba64）
});
}
,done:function(res){
//如果上传失败
de >0){
return layer.msg('图⽚上传失败！');
}
//上传成功
layer.msg("图⽚上传成功!",{
time:1000
},function(){
//重新加载页⾯
});
}
,error:function(){
//演⽰失败状态，并实现重传
var demoText =$('#demoText');
demoText.html('<span >上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); demoText.find('.demo-reload').on('click',function(){
uploadInst.upload();
});
}
});
});
三、后端
/**
* 管理员：添加图书
* @return
*/
@PostMapping("/addBook")
男龙女虎
@ResponBody
public Object addBook(Book book){
HashMap<String, Object> map =new HashMap<>();
// 存储图书信息到数据库
Integer flag = null;
try{
flag = bookService.addBook(book);
if(flag!=0){
map.put("msg","ok");
map.put("code",0);
}el{
map.put("msg","error");
map.put("code",1);
}
}catch(Exception e){
e.printStackTrace();
// 防⽌id重复
map.put("msg","error");
map.put("code",1);
欧洲云杉
}
宁波一日游必去景点return map;
}
/**
* 管理员：保存图⽚
*/
@PostMapping("/upload")
@ResponBody
public Object upload(MultipartFile file, String fileName){
HashMap<String, Object> map =new HashMap<>();
// 上传图⽚
// 存储地址
String realPath ="E:\\JAVA\\book_system\\src\\main\\resources\\static\\img";
// 获取⽂件后缀
String extension = OriginalFilename());
// ⽂件名
String newFileName= fileName +"."+extension;
//处理⽂件上传
try{
}catch(IOException e){
e.printStackTrace();
map.put("msg","error");
map.put("code",1);
}
map.put("msg","ok");
map.put("code",0);
return map;
}
