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 相关文章推荐
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
js实现漫天星星效果
Jan 19 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
Angular 数据请求的实现方法
May 07 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
php类常量的使用详解
2013/06/08 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
JavaScript Chart 插件整理
2010/06/18 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
Python实现保证只能运行一个脚本实例
2015/06/24 Python
python实现矩阵乘法的方法
2015/06/28 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
销售经理竞聘书
2014/03/31 职场文书
就业协议书怎么填
2014/04/11 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
租房安全协议书
2014/08/20 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书