代码拉取完成,页面将自动刷新
同步操作将从 李春林/ layui-filemanage 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
图片文件管理插件 支持远程图片显示 可配置默认文件类型图标 配置操作与layui-table类似; 更多功能请下载试用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图库管理power by www.nbnat.com</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" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
</head>
<body style='padding:10px'>
<button type="button" class="layui-hide" id="test1"></button>
<div class="layui-fluid">
<div id="fileManager" lay-filter="test" ></div>
</div>
</body>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
layui.extend({'fileManager':'ext/fileManager'});
layui.use(['fileManager','layer','upload'], function () {
var fileManager = layui.fileManager
,$ = layui.$
,upload = layui.upload
,layer = layui.layer;
$('title').html($('title').html()+' version:'+fileManager.v);
var upIns = upload.render({
elem: '#test1' //绑定元素
,url: 'data.php?action=upload' //上传接口
,field:'file[]'
})
fileManager.render({
elem: '#fileManager'
, method:'post'
, id: 'fmTest'
, btn_upload: true
, btn_create: true
, url: 'data.php?action=get_file_data'
, thumb: {'nopic':'/filemanage/upload/null-100x100.jpg','width':100,'height':100}
, parseData: function (res) {
/*
data:[{
thumb:文件地址用于显示
,type:文件类型 directory文件夹,png|gif|png|image图片,其它任意
,path:文件夹路径用于打开本文件夹
}]
*/
let _res = [];
_res.code = 0;
_res.data = res.images;
_res.count = res.count
return _res;
}
, done: function (res,curr,count) {
// console.log(res,curr,count)
}
, page: {limit:12}
, where: {action: 'get_file_data'}
});
//监听图片选择事件
fileManager.on('pic(test)', function(obj){
//obj.obj 当前对象
//obj.data 当前图片数据
var data = obj.data;
layer.alert(JSON.stringify(data), {
title: '当前数据:'
});
});
//监听图片上传事件
fileManager.on('uploadfile(test)', function(obj){
//obj.obj 当前对象
//obj.path 路径
//更改上传组件参数
upIns.config.data={'path':obj.path};
upIns.config.done = function(res){
fileManager.reload('fmTest');
}
var e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
document.getElementById("test1").dispatchEvent(e)
});
//监听新建文件夹事件
fileManager.on('new_dir(test)', function(obj){
//obj.obj 当前对象
//obj.folder 文件夹名称
//obj.path 路径
e = JSON.parse(e);
$.post('data.php?action=folder',{'folder':obj.folder,'path':obj.path},function(e){
layer.msg(e.msg);
if(e.code == 1){
fileManager.reload('fmTest');
}
})
});
});
</script>
</html>
参数 | 类型 | 说明 | 示例 |
---|---|---|---|
elem | String/DOM | 容器的选择器或 | "#demo" |
id | String | 设定容器唯一 id | test |
url | - | 异步数据接口相关参数 | 详见异步接口 |
icon_url | String | 文件类型默认图标, | 'http://test.hd/filemanage/ico/' |
btn_uplopd | Boolean | 是否显示上传按钮 | false |
btn_create | Boolean | 是否显示新建文件夹按钮 | false |
thumb | Array | 图片显示配置 | {'nopic':'100.jpg','width':100,'height':100} |
page | Boolean/Object | 分页设置 | 详见分页接口 |
done | Function | 渲染完的回调 | 详见示例 |
fileManager.v;
参数 ID 即为基础参数id对应的值,见:设定容器唯一ID 参数 options 即为各项基础参数
fileManager.reload('fmTest',{where:{'test':'reload'}});
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。