layui 图片上传+表单提交+ Spring MVC的实例


Posted in Javascript onSeptember 21, 2019

Layui 的上传是最常用的, 不可或缺, 记录一下代码, 以后复制都能用!!

1.前端HTML:

<div class="layui-form-item">
 <label class="layui-form-label">修改头像</label>
 <div class="layui-input-inline uploadHeadImage">
  <div class="layui-upload-drag" id="headImg">
   <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>

2.前端js:

<script type="text/javascript">
 layui.use(["jquery", "upload", "form", "layer", "element"], function () {
  var $ = layui.$,
   element = layui.element,
   layer = layui.layer,
   upload = layui.upload,
   form = layui.form;
  //拖拽上传
  var uploadInst = upload.render({
   elem: '#headImg'
   , url: '/upload/headImg'
   , size: 500
   , before: function (obj) {
    //预读本地文件示例,不支持ie8
    obj.preview(function (index, file, result) {
     $('#demo1').attr('src', result); //图片链接(base64)
    });
   }
   , done: function (res) {
    //如果上传失败
    if (res.code > 0) {
     return layer.msg('上传失败');
    }
    //上传成功
    //打印后台传回的地址: 把地址放入一个隐藏的input中, 和表单一起提交到后台, 此处略..
    /* console.log(res.data.src);*/
    window.parent.uploadHeadImage(res.data.src);
    var demoText = $('#demoText');
    demoText.html('<span style="color: #8f8f8f;">上传成功!!!</span>');
   }
   , error: function () {
    //演示失败状态,并实现重传
    var demoText = $('#demoText');
    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
    demoText.find('.demo-reload').on('click', function () {
     uploadInst.upload();
    });
   }
  });
  element.init();
 });
</script>

3.页面展示:

layui 图片上传+表单提交+ Spring MVC的实例

layui 图片上传+表单提交+ Spring MVC的实例

layui 图片上传+表单提交+ Spring MVC的实例

4.后台SpringMVC 接受:

/**
 * 个人信息上传
 * @return {Result}
 */
@RequestMapping(value = "/upload/headImg", method = {RequestMethod.POST})
@ResponseBody
public Object headImg(@RequestParam(value="file",required=false) MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws Exception {
 if (SecurityUtils.getSubject().isAuthenticated() == false) {
  return "redirect:/backEnd/login";
 }
 String prefix="";
 String dateStr="";
 //保存上传
  OutputStream out = null;
 InputStream fileInput=null;
 try{
  if(file!=null){
   String originalName = file.getOriginalFilename();
   prefix=originalName.substring(originalName.lastIndexOf(".")+1);
    dateStr = format.format(new Date());
   String filepath = request.getServletContext().getRealPath("/static") + uploadDir + dateStr + "." + prefix;
   filepath = filepath.replace("\\", "/");
   File files=new File(filepath);
   //打印查看上传路径
   System.out.println(filepath);
   if(!files.getParentFile().exists()){
    files.getParentFile().mkdirs();
   }
   file.transferTo(files);
  }
 }catch (Exception e){
 }finally{
  try {
   if(out!=null){
    out.close();
   }
   if(fileInput!=null){
    fileInput.close();
   }
  } catch (IOException e) {
  }
 }
 Map<String,Object> map2=new HashMap<>();
 Map<String,Object> map=new HashMap<>();
 map.put("code",0);
 map.put("msg","");
 map.put("data",map2);
 map2.put("src","../../../static"+uploadDir + dateStr + "." + prefix);
 return map;
}

5.关于表单请求, 正常使用layui的表单上传就可以了.. 这里就不写了, 太简单了, 我其它博客有写,请去翻阅,嗯 ,就这样.......

以上这篇layui 图片上传+表单提交+ Spring MVC的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
又一个图片自动缩小的JS代码
Mar 10 Javascript
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
angular4 JavaScript内存溢出问题
Mar 06 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
javascript的setTimeout()使用方法总结
Nov 20 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 #Javascript
layui table 表格模板按钮的实例代码
Sep 21 #Javascript
js实现图片3D轮播效果
Sep 21 #Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 #Javascript
原生js实现3D轮播图
Mar 21 #Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 #Javascript
关于layui flow loading占位图的实现方法
Sep 21 #Javascript
You might like
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
分享php多功能图片处理类
2016/05/15 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
python类型强制转换long to int的代码
2013/02/10 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
Python错误处理操作示例
2018/07/18 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
python ubplot使用方法解析
2020/01/10 Python
python中的itertools的使用详解
2020/01/13 Python
python爬虫可以爬什么
2020/06/16 Python
Python的collections模块真的很好用
2021/03/01 Python
大学生个人总结的自我评价
2013/10/05 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
党性修养心得体会2016
2016/01/21 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP