圖片文件管理插件 支持遠(yuǎn)程圖片顯示 可配置默認(rèn)文件類型圖標(biāo) 配置操作與layui-table類似; 更多功能請(qǐng)下載試用
html示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖庫(kù)管理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" />
<style>.layui-upload-img{width: 92px; height: 92px; margin: 0 10px 10px 0;}</style>
</head>
<body style='padding:10px'>
<button type="button" class="layui-hide" id="test1"></button>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>組件展示</legend>
</fieldset>
<div class="layui-fluid">
<div id="fileManager" lay-filter="test"></div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>彈層選圖</legend>
</fieldset>
<div class="layui-upload " >
<div style="width:150px;display:inline-block;">
<div class="layui-upload-listv picview" data-name='pic1' >
<img class="layui-upload-img">
<p>?</p>
</div>
</div>
<div style="width:150px;display:inline-block;">
<div class="layui-upload-listv picview" data-name='pic2' >
<img class="layui-upload-img">
<p>?</p>
</div>
</div>
<div style="width:150px;display:inline-block;">
<div class="layui-upload-listv picview" data-name='pic3' >
<img class="layui-upload-img">
<p>?</p>
</div>
</div>
</div>
</body>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
layui.extend({'fileManager': '../../../layui_exts/fileManager/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
, icon_url: 'ico/'
, url: 'data.php?action=get_file_data_vm'
, thumb: {'nopic': '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,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']}
, where: {}
});
//監(jiān)聽圖片選擇事件
fileManager.on('pic(test)', function (obj) {
//obj.obj 當(dāng)前對(duì)象
//obj.data 當(dāng)前圖片數(shù)據(jù)
var data = obj.data;
layer.alert(JSON.stringify(data), {
title: '當(dāng)前數(shù)據(jù)：'
});
});
//監(jiān)聽圖片上傳事件
fileManager.on('uploadfile(test)', function (obj) {
//obj.obj 當(dāng)前對(duì)象
//obj.path 路徑
//更改上傳組件參數(shù)
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)
});
//監(jiān)聽新建文件夾事件
fileManager.on('new_dir(test)', function (obj) {
//obj.obj 當(dāng)前對(duì)象
//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');
}
})
});
//彈層選擇
$(document).on('click','.picview',function(res){
let name = $(this).data('name');
layui.data('_fm', {key: '_picview_name',value: name});
layer.open({
type:2
, area: ['620px', '600px']
,content: ['pop.html', 'no']
})
});
//彈層選擇后的回調(diào)
window.callback = function(res){
let name = layui.data('_fm')._picview_name;
console.log(name)
$('.picview[data-name='+name+']').find('img').attr('src',res.thumb)
$('.picview[data-name='+name+']').find('p').text(res.name);
layui.data('_fm',null);
}
});
</script>
</html>
PS:關(guān)注碼云更新
