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 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
jQuery 学习入门篇附实例代码
Mar 16 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
JS随机漂浮广告代码具体实例
Nov 19 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
微信小程序select下拉框实现效果
May 15 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生成便于打印的网页
2006/10/09 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
原生js二级联动效果
2017/06/20 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
python如何生成网页验证码
2018/07/28 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
pygame实现非图片按钮效果
2019/10/29 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
医药营销个人求职信范文
2014/02/07 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
HR求职自荐信范文
2014/06/21 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
会议欢迎词
2015/01/23 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
诚信教育主题班会
2015/08/13 职场文书
php双向队列实例讲解
2021/11/17 PHP
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
flex弹性布局详解
2022/03/20 HTML / CSS
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers