前言

  • ruoyi 4.6.0
  • layui 2.3.0

layui upload

若依的默认上传组件虽然是bootstrap-fileinput(这里,这里,这里),但还是可以使用layui upload。

若依未包含layui的upload组件,自己去(这里)下载upload组件并引入即可。

使用

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>layui</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" th:href="@{/layui/css/layui.css"  media="all">
</head>
<body><div class="layui-upload"><button type="button" class="layui-btn" id="btn1">上传图片</button><div class="layui-upload-list"><img class="layui-upload-img" id="preview1" width="150px"></div>
</div>   <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script>
layui.use('upload', function(){var $ = layui.jquery,upload = layui.upload;//图片上传var uploadInst = upload.render({elem: '#btn1',url: ctx+'common/upload',auto: true /*选中后,立即上传*//*上传完成后的回调函数*/,done: function(res){//上传成功// 预览已上传的图片$('#preview1').attr('src', res.url); // 提示return layer.msg(res.msg,{icon: res.status,time: 2000});}});});
</script></body>
</html>

更多

参考这里。

【若依(ruoyi)】layui upload相关推荐

  1. layui upload 额外参数上传

    layui 2.0.x upload 额外参数上传 <div class="layui-inline" style="margin-top: 5px;"& ...

  2. layui upload 后台获取不到值

    后台获取不到值方法一: <script>layui.use('upload', function () {var upload = layui.upload;//执行实例var uploa ...

  3. layui upload.render上传组件js动态添加html后再次渲染

    页面效果 页面代码: <!-- 轮播图 --><input type="hidden" name="mcBaunell" id="m ...

  4. Layui upload上传文件

    一.使用layui upload模块上传文件 1.upload基本介绍 使用 upload 模块必须与 upload.render(options) 方法打交道,其中的 options即为基础参数,它 ...

  5. layui upload 上传大小限制

    百度了很多方法都没有成功,受到upload 限制文件最大kb 启发.添加了限制最小kb.废话不多说,上代码 upload.render({       elem: '.test'       ,acc ...

  6. layUi upload单文件上传,重复上传的问题

    今天遇到个问题,layUi upload单文件上传,选择两个不同文件时,第二次点击上传按钮还没选择上传,会把第一次上传的文件再上传一次 .在网上查到了答案,记录一下 //单个上传 upload.ren ...

  7. layui上传文件php上传接口异常,layui.upload上传图片报错“请求上传接口出现异常”...

    layui.upload上传图片报错"请求上传接口出现异常"且接口报404问题 在调试layui.upload上传图片时候报错"请求上传接口出现异常": 且接口 ...

  8. layui upload附件上传

    1.layui upload 动态生成js // 附件上传 // elemId:上传button, elemFile:文件存放地址 function fileUpload(elemId,elemFil ...

  9. LayUI upload上传组件上传文件的两种方式(手动上传、自动上传)

    1 手动上传 上传文件分为两步,第一步选择文件,第二步上传文件. HTML代码: <input type='button' id='selectFile' value='选择文件'> &l ...

最新文章

  1. Selenium3自动化测试——19.读取数据文件
  2. Fiddler抓包-只抓APP的请求
  3. leetcode 149. 直线上最多的点数
  4. java 线程工厂_Java并发编程:Java的四种线程池的使用,以及自定义线程工厂
  5. 《Python Cookbook 3rd》笔记(5.6):字符串的 I/O 操作
  6. ubuntu下用vagrant搭建集群环境
  7. 存储与主板的外设接口
  8. 【服务器正在运行中】以及【切换到】等错误问题的解决
  9. Web自动化测试框架-PO模式
  10. html手机表白弹窗,抖音弹窗表白代码怎么玩 弹窗表白制作方法与教程一览
  11. java cmyk和rgb的转换_CMYK与RGB相互转换(java)
  12. 【网页设计自习室#005】网页页面中banner海报设计
  13. 知识产权管理系统 开源_当前的知识产权格局如何影响开源
  14. 经典中的经典,古龙名著《陆小凤》决战紫禁之巅--叶西大战原文
  15. Office Online 在线预览
  16. net.sf.ezmorph.bean.MorphDynaBean cannot be cast to
  17. 如何在EXCEL中画横线并输入汉字
  18. ESXi处理主机错误无法进入维护模式
  19. 用C语言实现汉诺塔的移动过程并且统计移动的次数
  20. DOS命令之COPY

热门文章

  1. 高可用高性能分布式文件系统FastDFS实践Java程序
  2. Windows Azure Storage (4) Windows Azure Storage Service存储服务之Blob Share Access Signature
  3. 使用 AngularJS 和 ReactJS 的经验
  4. 1.解读REST和JAX-RS
  5. poj 3131 双向搜索+hash判重
  6. C#读写xml文件应用
  7. 误删/etc/passwd的修复
  8. 一个通过数据库镜像实现SPS 2003门户快速备份与恢复的操作手册
  9. MS SQL入门基础:数据查询--SELECT语句
  10. 分布式服务框架dubbo原理解析 转