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 45种缓动效果 非常酷
Jun 28 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
React中Ref 的使用方法详解
Apr 28 Javascript
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
php访问查询mysql数据的三种方法
2006/10/09 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
php中final关键字用法分析
2016/12/07 PHP
简单的JS多重继承示例
2008/03/13 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
Python PyQt5标准对话框用法示例
2017/08/23 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
Python中的集合介绍
2019/01/28 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
劳资员岗位职责
2013/11/11 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
寄语十八大感言
2014/02/07 职场文书
军训自我鉴定100字
2014/02/13 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
安全生产工作汇报
2014/10/28 职场文书
2014年卫生工作总结
2014/11/27 职场文书
飞屋环游记观后感
2015/06/08 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书