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 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
vue实现可移动的悬浮按钮
Mar 04 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
PHPMyAdmin 快速配置方法
2009/05/11 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
js静态作用域的功能。
2006/12/25 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
使用Python下载Bing图片(代码)
2013/11/07 Python
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
Python自定义简单图轴简单实例
2018/01/08 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
python实现图像拼接
2020/03/05 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
高中生活自我鉴定
2014/01/18 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
MYSQL 运算符总结
2021/11/11 MySQL
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技