nbnat-layui-filemanage: layui расширение плагин файл управление.

Расширение layui — управление изображениями

Плагин для управления файлами изображений Поддерживает отображение удалённых изображений Допускается конфигурация по умолчанию для типов файлов с использованием значков Настройка действий аналогична настройкам 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'}});


## Обработка событий

### Событие выбора изображения

- Подробнее в примерах

### Событие загрузки изображения

- Подробнее в примерах

### Событие создания новой папки

- Подробнее в примерах

OSCHINA-MIRROR/nbnat-layui-filemanage

Расширение layui — управление изображениями

Комментарии ( 0 )

Введение

Обновления (2)

Участники

Недавние действия

OSCHINA-MIRROR/nbnat-layui-filemanage .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

Расширение layui — управление изображениями

Комментарии ( 0 )

Введение

Обновления (2)

Участники

Недавние действия

OSCHINA-MIRROR/nbnat-layui-filemanage