layui(1.0.9)文件上传upload,前后端的实例代码


Posted in Javascript onSeptember 26, 2019

因为公司还在使用老版本的layui,文件上传在新版本中全部重写了,这里记录下老版本layui的文件上传。

前端代码:(引入layui相关包)

<input type="file" lay-type="file" id="xxxxx" name="file" class="layui-upload-file">

这里可以参考layui官方文档,有一点需要注意,name属性是必需的,当你选择好文件后,name属性的值,会在后台被相应的参数接收。

如果你只写了上面的代码,会发现文件上传的按钮消失了。这很正常,因为框架就是这么设计的。

layui.upload({
  url: '/pay_channel/upload'
  ,before: function(input){
   //返回的参数item,即为当前的input DOM对象
   $(input).after('<input type="hidden" name="mchId-file" value="11111"/>');
   //layer.msg('文件上传中',{zIndex:20180509});
  }
  ,success: function(res){
  if(res.code == 'success'){
   layer.msg(res.message,{zIndex:20180510});
   certLocalPath = res.filePath
  }else{
   layer.msg(res.message,{zIndex:20180510});
  }
  }

});

url是请求地址,必须是AJAX请求(POST),必须返回JSON,返回的数据在success中操作,以上代码简单易懂,不用照抄。

before是指在上传请求进行之前,进行的一些操作,$(input).after('<input type="hidden" name="mchId-file" value="'+mchIdxx+'"/>');这段代码是为了追加一个参数,参数名字位mchId-file,值为11111,所以后端接收会有两个参数,file和mchId-file。

后端代码:

@RequestMapping("/upload")
  @ResponseBody
  public String importFile(MultipartFile file, HttpServletRequest request) {
   JSONObject object = new JSONObject();
      try {
       String mchId = request.getParameter("mchId-file");
       String originalFilename = file.getOriginalFilename();
//       String dirPath = System.getProperty("user.dir")+"/wx";
//       String dirPath = this.getClass().getClassLoader().getResource("").getPath()+"wx";
       String dirPath = "/xxxx/java/pay/wx/cert";
       _log.info("证书上传的文件目录{}", dirPath);
       String filePath = "/"+mchId+"_"+originalFilename;
  boolean b = new File(dirPath).mkdirs();
  file.transferTo(new File(dirPath + filePath).getAbsoluteFile());
  
  object.put("filePath", filePath);
  object.put("code", "success");
  object.put("message", "文件上传成功");
  } catch (IOException e) {
  e.printStackTrace();
  object.put("code", "fail");
  object.put("message", "文件上传失败");
  }
      return object.toJSONString();

  }

获得的file是MultipartFile类对象,org.springframework.web.multipart.MultipartFile

该对象可以获取文件名字getOriginalFilename,获取文件流getInputStream,传输到另一个文件的方法transferTo等。

以上后端方法是将获取到的文件,保存到另一个特别目录中去。

再说几句题外话:

String dirPath = System.getProperty("user.dir");//获取项目地址根目录,就是说你workspace中,该项目初始目录。

String dirPath = this.getClass().getClassLoader().getResource("").getPath();//获取项目resource目录位置,即springboot中application.yml所在文件夹。

再windows中其实不需要写盘符来表示这个目录的绝对路径,String dirPath = "/xxxx/java/pay/wx/cert";如果你项目在D盘,那绝对路径就会变成D:/xxxx/java/pay/wx/cert,这样就避免了服务器windows与linux的问题。

但有一点要注意:File file = new File(dirPath + filePath).getAbsoluteFile(),如果使用/开头,需要用getAbsoluteFile()获取到D:/xxxx/java/pay/wx/cert路径的文件对象。

以上这篇layui(1.0.9)文件上传upload,前后端的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 表单之间的数据传递代码
Dec 04 Javascript
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue实现全匹配搜索列表内容
Sep 26 #Javascript
vue实现节点增删改功能
Sep 26 #Javascript
浅谈layui里的上传控件问题
Sep 26 #Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 #Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 #Javascript
layui 上传图片 返回图片地址的方法
Sep 26 #Javascript
vue仿ios列表左划删除
Sep 26 #Javascript
You might like
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
Vue自定义指令详解
2017/07/28 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
建筑工程技术应届生自荐信
2013/09/27 职场文书
员工年终演讲稿
2014/01/03 职场文书
大学生学习计划书
2014/09/15 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
2019求职信大礼包
2019/05/15 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
JS class语法糖的深入剖析
2022/07/07 Javascript