2014年5月14日 星期三

好用的jQuery文件管理器-elFinder

在進行不少專案的時候,總免不了要規劃的就是類似文件櫃的功能。 以前總是自己簡單寫幾隻程式,處理檔案上傳、掃描目錄、下載的功能, 或者偶爾還要考慮到記錄文件的屬性,把上傳的資訊與目錄結構寫入資料庫。 不過,偶爾還是會有IE那討厭的不同版本對header的不同反應問題, 這時候就應該推薦一下,elFinder這個使用javascript + iQuery的open-source file manager
( http://elfinder.org/ )
寫下這篇介紹時,釋出的版本有 1.x 與 2.x 兩種選擇,其中 2.x 要求有 PHP 5.2 以上的環境。使用elFinder的方式很簡單 ( 當然要簡單好用阿~不然是要推薦做什麼? XD ) 下載解壓縮之後,先把不必要的檔案移除掉,例如範例網頁、\js\i18n 裡面不需要的語言等等.. 接著在要使用到elFinder的程式中先引入 jQuery 與 jQuery-UI <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> 接著是引用 js 與 css <link rel="stylesheet" type="text/css" media="screen" href="css/elfinder.min.css"> <script type="text/javascript" src="js/elfinder.min.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="css/theme.css"> 因為官方釋出的版本並沒有中文語系,所以泡泡我參考英文與簡體中文,大概翻譯了一下繁體中文的語系檔案 如果要把介面改成繁體中文,就多引用個檔案進來 <script type="text/javascript" src="js/i18n/elfinder.zh_TW.js"></script> 繁體中文的語系檔案,可以在這裡下載 最後,準備工作完成,來建立一個elFinder文件管理器瞧瞧 <script type="text/javascript" charset="utf-8"> $().ready(function() { var elf = $('#elfinder').elfinder({ // lang: 'zh_TW', // language (OPTIONAL) url : 'php/connector.php' // connector URL (REQUIRED) }).elfinder('instance'); }); </script> 喔~對了,要記得,給個DIV作為elFinder的顯示位置,配合官網上面的jQuery語法,這個DIV就跟著為elfinder吧 <div id="elfinder"></div> 其實到這裡還差得遠了,快快打開上頭的 url 參數 php/connector.php 修改修改 $opts = array( // 'debug' => true, 'roots' => array( array( 'driver' => 'LocalFileSystem', // driver for accessing file system (REQUIRED) 'path' => '檔案存放路徑', // path to files (REQUIRED) 'URL' => '檔案存放網址', // URL to files (REQUIRED) 'accessControl' => 'access', // disable and hide dot starting files (OPTIONAL) 'alias' => 'Home' // 顯示在文件管理器中的根目錄別名 ) )); 目前為止,這樣的呼叫方法沒有做到權限控管,太可怕了 所以加上個 attributes 屬性 $opts = array( // 'debug' => true, 'roots' => array( array( 'driver' => 'LocalFileSystem', // driver for accessing file system (REQUIRED) 'path' => '檔案存放路徑', // path to files (REQUIRED) 'URL' => '檔案存放網址', // URL to files (REQUIRED) 'accessControl' => 'access', // disable and hide dot starting files (OPTIONAL) 'alias' => 'Home', // 顯示在文件管理器中的根目錄別名 'attributes' => array( array( 'pattern' => '', 'read' => $cread, //以下三個權限 'write' => $cwrite, 'locked' => $clocked ) ) ) ) ); https://github.com/Studio-42/elFinder/wiki/Simple-file-permissions-control 其中的 read , write , locked 三個屬性質,可以替換成變數, 依照使用者的登入情形來判斷是否具有管理的權限,到這裡為止,大致算是可以使用了 如果要進階一點的話,呼叫的時候指定為多重目錄、跨SERVER使用FTP也都很有彈性!
但是那一排功能按鈕,如果在不具有權限的使用者登入時仍然會出現, 然後使用者點選了之後才說沒有權限,這樣實在有點討厭,所以再做一點修改 呼叫頁面中,也可以針對不同的使用者,呼叫不同的功能組合 commands : ['open', 'reload', 'home', 'up','download', 'rm','rename', 'mkdir','upload', 'copy', 'cut', 'paste', 'search', 'info', 'view','help','sort'], 或者 commands : ['open', 'reload', 'home','download','sort', 'view','search'], https://github.com/Studio-42/elFinder/wiki/Client-configuration-options#commands
當然,要再精緻一點,也可以指定預設的檢視模式 (有圖示模式和清單模式兩種 )
defaultView: 'list' 或者 'icons' https://github.com/Studio-42/elFinder/wiki/Client-configuration-options#defaultview 說真的,這個套件實在好用,而且對中文的支援OK,介面也漂亮 ^^
比起我TRY過幾個受到諸多討論的 jQuery File Tree 來說,實在是完全勝出! 特別介紹一下,希望有人也用得上 :)

( 原文同步發表於 http://bubble.bubbleliao.idv.tw/2014/05/20140514-jquery-elfinder.html )

沒有留言:

張貼留言