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入门教程(5) js Screen屏幕对象
Jan 31 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 Javascript
vue2.0实现列表数据增加和删除
Jun 17 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命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
php cookie 详解使用实例
2016/11/03 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
深入理解Django的中间件middleware
2018/03/14 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
幼儿园家长评语
2014/02/10 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
人力资源求职信
2014/05/25 职场文书
图书室标语
2014/06/21 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
甲午风云观后感
2015/06/02 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
java实现web实时消息推送的七种方案
2022/07/23 Java/Android