【若依(ruoyi)】layui upload

前言ruoyi 4.6.0layui 2.3.0layui upload若依的默认上传组件虽然是bootstrap-fileinput(这里，这里，这里)，但还是可以使用layui upload。若依未包含layui的upload组件，自己去（这里）下载upload组件并引入即可。使用<!DOCTYPE html><html><head><meta cha

sayyy

1842人浏览 · 2021-11-29 11:30:59

sayyy · 2021-11-29 11:30:59 发布

前言

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>