UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

响应式文件浏览管理器angular-filemanager

所属分类：导航,其他-文件树,独立的部件

 71299  466  查看评论 (28)
分享到微信朋友圈
X
响应式文件浏览管理器angular-filemanager ie兼容10
 查看演示  website  立即下载

注：因展示需要服务端支持，演示不能完全展示结果，请下载后自行本地配置。

angular-filemanager

功能介绍

  1. 多语言（英语，中文，西班牙语，俄语，葡萄牙语，法语，德语，意大利语，斯洛伐克语，希伯来语，波斯语，波兰语，乌克兰语，土耳其语）

  2. 多个模板（列表/图标）

  3. 多文件上传

  4. 多文件支持

  5. 为第三方应用选择文件回调

  6. 搜索文件

  7. 目录树导航

  8. 复制，移动，重命名（Interactive UX）

  9. 删除，编辑，预览，下载

  10. 文件权限（Unix chmod style）

  11. 移动支持

Drag and drop

  1. Dropbox和Google云端硬盘的兼容性

  2. 扩展后端网桥（PHP，Java，Python，Node，.Net）

  3. 将jQuery迁移到native或angular.element


Backend API

在您现有的项目中使用

1）安装和使用bower install --save angular-filemanager

2）在项目中包含依赖项

<!-- third party -->
  <script src="bower_components/angular/angular.min.js"></script>
  <script src="bower_components/angular-translate/angular-translate.min.js"></script>
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="bower_components/bootswatch/paper/bootstrap.min.css" />
<!-- angular-filemanager -->
  <link rel="stylesheet" href="dist/angular-filemanager.min.css">
  <script src="dist/angular-filemanager.min.js"></script>

在HTML中使用

<angular-filemanager></angular-filemanager>

使用源文件而不是缩小的JS

<!-- Uncomment if you need to use raw source code
  <script src="src/js/app.js"></script>
  <script src="src/js/directives/directives.js"></script>
  <script src="src/js/filters/filters.js"></script>
  <script src="src/js/providers/config.js"></script>
  <script src="src/js/entities/chmod.js"></script>
  <script src="src/js/entities/item.js"></script>
  <script src="src/js/services/apihandler.js"></script>
  <script src="src/js/services/apimiddleware.js"></script>
  <script src="src/js/services/filenavigator.js"></script>
  <script src="src/js/providers/translations.js"></script>
  <script src="src/js/controllers/main.js"></script>
  <script src="src/js/controllers/selector-controller.js"></script>
  <link href="src/css/animations.css" rel="stylesheet">
  <link href="src/css/dialogs.css" rel="stylesheet">
  <link href="src/css/main.css" rel="stylesheet">
-->
<!-- Comment if you need to use raw source code -->
  <link href="dist/angular-filemanager.min.css" rel="stylesheet">
  <script src="dist/angular-filemanager.min.js"></script>
<!-- /Comment if you need to use raw source code -->

扩展配置文件

<script type="text/javascript">
angular.module('FileManagerApp').config(['fileManagerConfigProvider', function (config) {
  var defaults = config.$get();
  config.set({
    appName: 'angular-filemanager',
    pickCallback: function(item) {
      var msg = 'Picked %s "%s" for external use'
        .replace('%s', item.type)
        .replace('%s', item.fullPath());
      window.alert(msg);
    },
    allowedActions: angular.extend(defaults.allowedActions, {
      pickFiles: true,
      pickFolders: false,
    }),
  });
}]);
</script>

您可以通过扩展配置来做许多事情。 喜欢隐藏侧边栏或搜索按钮。 请参阅默认配置列表。angular-filemanager/src/js/providers/config.js

(function(angular) {
    'use strict';
    angular.module('FileManagerApp').provider('fileManagerConfig', function() {

        var values = {
            appName: 'angular-filemanager v1.5',
            defaultLang: 'en',

            listUrl: 'bridges/php/handler.php',
            uploadUrl: 'bridges/php/handler.php',
            renameUrl: 'bridges/php/handler.php',
            copyUrl: 'bridges/php/handler.php',
            moveUrl: 'bridges/php/handler.php',
            removeUrl: 'bridges/php/handler.php',
            editUrl: 'bridges/php/handler.php',
            getContentUrl: 'bridges/php/handler.php',
            createFolderUrl: 'bridges/php/handler.php',
            downloadFileUrl: 'bridges/php/handler.php',
            downloadMultipleUrl: 'bridges/php/handler.php',
            compressUrl: 'bridges/php/handler.php',
            extractUrl: 'bridges/php/handler.php',
            permissionsUrl: 'bridges/php/handler.php',
            basePath: '/',

            searchForm: true,
            sidebar: true,
            breadcrumb: true,
            allowedActions: {
                upload: true,
                rename: true,
                move: true,
                copy: true,
                edit: true,
                changePermissions: true,
                compress: true,
                compressChooseName: true,
                extract: true,
                download: true,
                downloadMultiple: true,
                preview: true,
                remove: true,
                createFolder: true,
                pickFiles: false,
                pickFolders: false
            },

            multipleDownloadFileName: 'angular-filemanager.zip',
            filterFileExtensions: [],
            showExtensionIcons: true,
            showSizeForDirectories: false,
            useBinarySizePrefixes: false,
            downloadFilesByAjax: true,
            previewImagesInModal: true,
            enablePermissionsRecursive: true,
            compressAsync: false,
            extractAsync: false,
            pickCallback: null,

            isEditableFilePattern: /\.(txt|diff?|patch|svg|asc|cnf|cfg|conf|html?|.html|cfm|cgi|aspx?|ini|pl|py|md|css|cs|js|jsp|log|htaccess|htpasswd|gitignore|gitattributes|env|json|atom|eml|rss|markdown|sql|xml|xslt?|sh|rb|as|bat|cmd|cob|for|ftn|frm|frx|inc|lisp|scm|coffee|php[3-6]?|java|c|cbl|go|h|scala|vb|tmpl|lock|go|yml|yaml|tsv|lst)$/i,
            isImageFilePattern: /\.(jpe?g|gif|bmp|png|svg|tiff?)$/i,
            isExtractableFilePattern: /\.(gz|tar|rar|g?zip)$/i,
            tplPath: 'src/templates'
        };

        return {
            $get: function() {
                return values;
            },
            set: function (constants) {
                angular.extend(values, constants);
            }
        };

    });
})(angular);
相关插件-文件树,独立的部件
查看更多

纯javript实用多级目录树结构插件

 aimaraJS是一款非常实用的纯javript响应式多级目录树结构插件。该目录树可以动态添加和删除树节点，可以制作多级树结构，每个节点上可以都带有右键上下文菜单，并且每个节点上都
  文件树
 60268  353

轻量级的原生js权限树插件(原创)

 YnTree是一款专门用于权限管理的权限树插件，它依靠数据来驱动，不依赖于任何别的插件并且支持ajax。
  文件树
 49457  364

可无限添加子级的数据树（原创）

 可折叠的数据树，可以选择有选择框或无选择框
  文件树
 37755  338

纯手写完成“移动端权限树”插件

 实现移动端权限树的全选，半选，以及不选的递归功能
  文件树
 65370  431

讨论这个项目（28）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Y逸.G仙 DA! 0
    2020/12/29 20:12:03
    能发个纯前端嘛 回复
    Qyuan 0
    2020/3/23 17:50:11
    此文件夹没有文件，默认文件夹是哪个？ 回复
    Consola 0
    2019/9/14 10:45:01
    后端开发人员表示很捉急,怎么用啊,这么好的工具,难受啊
        Rv0
        2019/11/23 10:58:26
        百度上搜就有一些使用案例的呀
    回复
    nanbo 0
    2019/7/2 8:08:37
    好吧好吧。 0
    2018/9/26 16:24:38
    水瓶???? 0
    2018/5/18 10:31:02
    怎么使用啊，哪位小伙伴指明下 回复
    哈尔滨-邓武臣 0
    2018/3/16 10:21:28
    谁有Javaweb的代码发给我份谢谢 almadwc@163.com 回复
    @??晶莹雪??寂寞林??@ 0
    2017/12/23 10:41:42
    有源码吗?不要对js打包的 回复
    Stay Real 0
    2017/11/27 14:56:53
    没法用啊  用源文件的时候就报错了 回复
    姜先森丶 0
    2017/11/21 11:16:32
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复