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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
JQuery实现图片轮播效果
May 08 jQuery
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 Javascript
微信小程序实现首页弹出广告
Dec 03 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
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
PHP生成UTF8文件的方法
2010/05/15 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
Python中类型关系和继承关系实例详解
2015/05/25 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
python实现机器人卡牌
2019/10/06 Python
出生公证委托书
2014/04/03 职场文书
大学生个人学年总结
2015/02/15 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
限期整改通知书
2015/04/22 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS