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 相关文章推荐
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
Vite和Vue CLI的优劣
Jan 30 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
非常不错的MySQL优化的8条经验
2008/03/24 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
python web框架学习笔记
2016/05/03 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
MySQL面试题
2014/01/12 面试题
投标承诺书怎么写
2014/05/24 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL