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 相关文章推荐
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
javascript之Partial Application学习
Jan 10 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
vue项目初始化到登录login页面的示例
Oct 31 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
php json_encode奇怪问题说明
2011/09/27 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
python处理json数据中的中文
2014/03/06 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
Python argparse模块应用实例解析
2019/11/15 Python
Python如何读取文件中图片格式
2020/01/13 Python
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
两只小狮子教学反思
2014/02/05 职场文书
5s标语大全
2014/06/23 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
劳资员岗位职责
2015/02/13 职场文书
优秀团员自我评价
2015/03/10 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL