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操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
使用js显示当前时间示例
Mar 02 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
JavaScript中的执行环境和作用域链
Sep 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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
python中的变量如何开辟内存
2018/06/26 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
老公给老婆的道歉信
2014/01/10 职场文书
五一劳动节活动记录
2014/03/23 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
房屋认购协议书
2015/01/29 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
python实现简单石头剪刀布游戏
2021/10/24 Python