1.首先添加选择图片按钮
<div class="layui-form-item" style="width: 80%"> <label class="layui-form-label">房间图片</label> <h5 id="fileName" style="float: left;margin:0 10px; line-height: 38px;"></h5> <button style="float: left;" class="layui-btn" id="preview_img" type="button"> 选择图片 </button> </div>
2.添加form表单提交按钮
<div class="layui-form-item" style="width: 80%"> <div class="layui-input-block"> <button id="addRoomType" class="layui-btn" lay-submit lay-filter="addRoomType" style="display: none">提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div>
3.写script语句
layui.use(['layer','form','upload'],function () { var layer = layui.layer ,form = layui.form ,upload = layui.upload; var $ = layui.$; /*上传图片*/ upload.render({ elem: '#preview_img' , url: 'addRoomType' , size: 1024 , auto: false //不自动上传 , choose: function (obj) { //预读本地文件 obj.preview(function (index, file, result) { $('#fileName').html(file.name); //展示文件名 }) } , error: function (index, upload) { layer.msg('上传失败!' + index, { icon: 5 }); } }); //监听提交 form.on('submit(addRoomType)', function (d) { var data = new FormData(document.getElementById("layer_window")); $.ajax({ url: 'addRoomType', type: 'POST', data: data, processData: false, contentType: false, success: function (r) { if (r.code === 200) { location.href = ""; } else { layer.msg(r.message); } } }); return false; }); });
4.后台接收
@PostMapping("addRoomType") @ResponseBody public NingResponse addRoomType(MultipartFile file, RoomType roomType) throws IOException { String fileName = file.getOriginalFilename(); InputStream inputStream = file.getInputStream(); File uploadFile = new File(this.getClass().getResource("/").getPath() + "/static/static/img/", fileName); FileUtils.copyInputStreamToFile(inputStream, uploadFile); roomType.setTypeImg("/static/static/img/"+fileName); if (this.iRoomTypeService.save(roomType)) { return new NingResponse().message("添加成功").success(); } return new NingResponse().message("添加失败").fail(); }