臺中市國教輔導團資訊教育輔導小組: 好用的jQuery文件管理器-elFinder

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