Слияние кода завершено, страница обновится автоматически
Плагин для управления файлами изображений Поддерживает отображение удалённых изображений Допускается конфигурация по умолчанию для типов файлов с использованием значков Настройка действий аналогична настройкам layui-table; Для просмотра дополнительных функций скачайте и попробуйте самостоятельно.
## Пример использования
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Управление галереей powered 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() + ' версия:' + fileManager.v);
var upIns = upload.render({
elem: '#test1', //binding element
url: 'data.php?action=upload', //upload interface
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|jpg|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
</script>
``````markdown
on('pic(test)', function(obj){
// obj - текущий объект
// obj.
```данные текущего изображения
var данные = obj. данные;
layer. alert(JSON. stringify(данные), {
title: 'Текущие данные:'
});
});
// Наблюдение за событием загрузки файла
fileManager. on('uploadfile(test)', function(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. 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>
### Базовые параметры
```| Параметр | Тип | Описание | Пример |
| -------- | -----------| ------------------------------------ | -----------------|
| elem | String/DOM | Выборщика контейнера или DOM-элемент | "#demo" |
| id | String | Уникальный идентификатор контейнера | "test" |
| url | | Параметры асинхронного API данных | [Подробнее об асинхронном API](https://www.layui.com/doc/modules/table.html#async) |
| icon_url | String | По умолчанию используется иконка типа файла | 'http://test.hd/filemanage/ico/' |
| btn_upload | Boolean | Отображение кнопки загрузки | false |
| btn_create | Boolean | Отображение кнопки создания папки | false |
| thumb | Array | Настройки отображения изображений | [{'nopic':'100.jpg','width':100,'height':100}] |
| page | Boolean/Object | Настройки пагинации | [Подробнее о настройках пагинации](https://www.layui.com/doc/modules/laypage.html#options) |
| done | Function | Коллбэк после окончательной загрузки | Подробнее в примерах |
## Базовые методы
### Текущая версия
fileManager.v;
### Перезагрузка
Параметр `id` — это уникальный идентификатор контейнера, указанный в базовых параметрах.
Параметр `options` — это все остальные базовые параметры.
fileManager.reload('fmTest', {where: {'test': 'reload'}});
## Обработка событий
### Событие выбора изображения
- Подробнее в примерах
### Событие загрузки изображения
- Подробнее в примерах
### Событие создания новой папки
- Подробнее в примерах
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )