前言

  • 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. 为什么jupyterlab运行程序的时候会自动停止_搭建 Julia 轻量级编写环境(VSCode,JupyterLab)
  2. 全球及中国第三方供应链管理行业发展状况与规模前景分析报告2022-2027年
  3. 盒马mini带客流,老菜场攒烟火气,新老菜场交融相映成辉
  4. 【Ubuntu】 Ubuntu16.04搭建NFS服务
  5. jhat命令 Java Heap Analyse Tool
  6. pbs分解_产品分解结构
  7. Office 365强势来袭PART3:管理云用户
  8. Linux/Unix服务端和客户端Socket编程入门实例(含源码下载)
  9. IDF2013:可信计算在中国的发展
  10. ICCV 2021 best paper-Swin Transformer:对各类SOTA的降维打击!
  11. C#读取或设置ScrollLock
  12. matlab——diff函数
  13. java生成word,营业执照获取信息,cookie
  14. 松下PLC连接海创-IIoT平台案例
  15. [网络应用]11款来自 deviantART 的 foobar 2000 皮肤
  16. 冲顶大会/芝士超人/花椒直播...答题助手
  17. Tecplot 360 使用说明
  18. Excel 2010高级应用-饼图(四)
  19. 在线作图|2分钟在线绘制三维PCOA图
  20. python实现函数的最佳平方逼近

热门文章

  1. Item 9 Always override hashCode when you override equals HASHMAP扩展
  2. 7z(p7zip)压缩软件在Linux下的安装和使用
  3. jsp 防止sql注入 之 preparestatement篇(转载)
  4. c#word转换pdf
  5. c# datatable.select() 支持group by
  6. django写原生sql语句
  7. python判断值是否为空(亲测)
  8. php连接mongoDB的几个问题
  9. 超大数据量存储常用数据库分表分库算法总结
  10. 新版谷歌浏览器怎么查找和改变编码格式