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 相关文章推荐
js不是基础的基础
Dec 24 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
JS数组的常用10种方法详解
May 08 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中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
jquery创建div 实现代码
2009/04/27 Javascript
JavaScript的变量作用域深入理解
2009/10/25 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
浅谈Python中的数据类型
2015/05/05 Python
python list转矩阵的实例讲解
2018/08/04 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
Python多项式回归的实现方法
2019/03/11 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
英语文学专业学生的自我评价
2013/10/31 职场文书
售房委托书
2014/08/30 职场文书
春节晚会开场白
2015/05/29 职场文书
关于做家务的心得体会
2016/01/23 职场文书
怎么用Python识别手势数字
2021/06/07 Python
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技