客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称：layui-filemanage开源软件地址：https://gitee.com/nbnat/layui-filemanage开源软件介绍：layui扩展-图片管理图片文件管理插件支持远程图片显示可配置默认文件类型图标配置操作与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>基础参数
基础方法当前版本fileManager.v;重载参数 ID 即为基础参数id对应的值，见：设定容器唯一ID参数 options 即为各项基础参数 fileManager.reload('fmTest',{where:{'test':'reload'}});事件监听图片选择事件
图片上传事件
新建文件夹事件
 |
请发表评论