這甚麼爛東西，為甚麼要把一般的檔名全部編碼起來？那我用 Samba 的時候怎樣知道這個檔案是甚麼檔案？某 Beta 測試用家 沒錯，這一篇文章就是用來介紹到底為甚麼 ArOZ Online 要使用一個這麼麻煩的編碼方法來儲存檔案名稱及資料夾名稱。先由結論說起：這一切都是 Windows 的錯！ 在這裡我先解釋一下甚麼是 UMFilename 跟 HexFoldername。這兩個是 ArOZ Online 用來給檔案及資料夾名稱編碼的方法，簡單來說就是把檔案名字使用 "inith" + bin2hex(原檔名) + "." + 原副檔名 和把資料夾使用 bin2hex(原資料夾名稱) 來編碼的一個神奇儲存方法。一般如果你在用 ArOZ Online 的檔案管理員你會看到有一些使用者自行上載的檔案會出現 綠色 或 藍色 底色的，那就是經編碼後的資料名稱。 HexFoldername 在 File Explorer 上顯示為綠色 UMFilename 在 File Explorer 上顯示為 藍色 故事起源： ArOZ Online Alpha ArOZ Online Alpha 是一套使用 PHP 5 編寫的影音串流系統，本來是用於 Windows + WAMP 的網頁伺服器架構上。而開發者我使用的 Windows 7 本身是 Big-5 編碼的，因此對中文的支援是完全 OK 的，但是我除了中文音樂之外也有聽日文的音樂，而問題就出在了這裡： PHP5 在讀取日文檔案名稱的時候出現亂碼。 ArOZ Online Alpha 的音樂播放界面 對於這個問題，基本上一般人想到的就只有這幾個解決方案： 把伺服器重灌，裝個 Unicode 版的 Windows 或者使用 Linux使用 Linux VM 並在 VM 裡面運行系統把檔案名稱全部放到 Database 裡，然後根據檔案路徑找到 Unicode 編碼的檔案名字。 然而，由於這套系統的無 DB 特性，第 3 點就不能用了；第 1, 2 點也太麻煩了完全不附合成本效益，所以最後的解決方法是：上載的時候使用 PHP 把檔名編碼成一個只使用 ASCII 的字串，然後以編碼字串來儲存，要讀取的時候從系統讀取檔名然後解碼出原本的檔名就好了。 可是，另一個問題就出現了。如果檔案名字本身就是以我編碼的方式儲存怎辦？例子： 音樂.mp3 -> abc.mp3 然後又剛好出現一個 abc.mp3？所以就乾脆直接在編碼後的檔案名字前加上 "inith" （Initiate with Hex Value），用以分辨是我方編碼的還是原本已經編碼的檔案，就是這樣，這種 UMFilename 的初型就出現了。 那為甚麼這種編碼方式叫做 UMFilename？ 在剛開發 ArOZ Online Beta 的時候，最基礎的模組只有 Audio，Video 跟 Photo。基本上就是用以代替 ArOZ Online Alpha 的基本功能。 然而，這三個模組都需要上載功能，而由於 ArOZ Online Beta 的模組化設計原則，一個新的模塊被設計了出來： Upload Manager。 ArOZ Online Beta Audio 模組裡的 Upload Manager 界面 由於這個 Upload Manager 同樣遇上跟之前 Alpha 版本時的系統編碼問題，於是就直接把 Alpha 版的檔案名編碼方式搬過來了。而本來並沒有特別名稱的這種編碼方式也跟著這個模塊的名字改了起來，變成了 Upload Manager special File Naming Method，簡稱 UMFilename（或有人稱為 inith 命名法 或 inith filename）。 那 Hex Foldername 又是哪裡出來的？ 在 ArOZ Online Beta 檔案管理員開發中的時候，一個 Bug 出現了。由於系統內的資料夾全部都是英文，直到桌面模組出現了之後才有機會因使用者新增資料夾的關系出現中文的資料夾名稱。到了中文的部分其實還是不大問題，因為中文還可以透過 PHP 的 mbstring 解決，然而日文的資料夾名稱就無法載入了。就結果而言，資料夾的命名需要另一個特別的編碼方法。 其實到發現這個問題的時候已經是滿後期的了，之前已經發生過不少因檔案名字過長而無法開啟的情況。（因為…

說到要在 WebApp 上讓使用者選擇檔案你會怎樣設計？ 不少開發者都直接在 WebApp 裡面創建一個可以點選的列表就算數，能用但是不完美；所以在 ArOZ Online Base 系統架構裡面，我們在設計 File System 的時候就設計了一個可以輕易讓開發者使用的 檔案選擇器 ( File Selector ) 了。 ArOZ Online 系統下的 File Selector 所以，為啥我要用 FIle Selector？我自己幹一個就好了啊？ 對，你也可以自己幹一個檔案選擇器，可是系統內建的 File Selector 有幾點用起來真的滿方便的。 預設支援 UM-FILENAME 及 HEX-FOLDERNAME 由於內建的檔案選擇器內建了 UM-Filename 跟 Hex-Foldername 的轉換程式，所以寫起來不必要特別自行處理這些特別的檔案命名方式。 Hex-foldername 顯示方法 UM-Filename 顯示方法 支援新增文件或資料夾 如果你需要新增一個文件或資料夾的時候，你可能要在 WebApp 裡面多加一個 <form> 元素，之後又需要增加一個處理的 php 甚麼的不是很麻煩嗎？用系統內置的 File Selector 就能直接省略這些問題，使用 Javascript callback 來取得使用者新建的文件名或資料夾名稱及位置。 新建文件的 File Selector 界面 使用方法 一般來說我們會建議使用者使用 Float Window 模式啟用 File Selector。然而，在一般網頁模式下啟動 File Selector 也是可以的，只不過使用體驗上會感覺到有點奇怪。首先，我們先從由 Float Window Mode 啟動 File Selector 的教學開始： 在 Float Window 模式下啟動檔案選擇器 先假設我們有這麼一個 function 來接收使用者選擇的檔案 function addFileFromSelector(fileData){ result = JSON.parse(fileData); for (var i=0; i < result.length; i++){ var filename = result[i].filename; var filepath = result[i].filepath; //DO SOMETHING HERE } } 以下是功能的啟動參數 ao_module_openFileSelector(uid,callBackFunctionName, windowWidth = 1080, windowHeight = 645, allowMultiple = false, selectMode = "file", newfname = "newfile.txt", umf = true) allowMultiple : 充許選擇多個檔案selectMode : (file / folder / mix / new)，其意思為：只選擇檔案 / 只選擇資料夾 / 可選擇資料夾或檔案 / 新增文件或資料夾newfname : 新增檔案的預設名字（只在 selectMode = new 時有效）umf : 使用 UM-Filename 編碼檔案名字（只在 selectMode = new 時有效） //最基本的例子 var uid = ao_module_utils.getRandomUID(); ao_module_openFileSelector(uid,"addFileFromSelector",undefined,undefined,true); //自定義選擇器大小 var uid = ao_module_utils.getRandomUID(); ao_module_openFileSelector(uid,"addFileFromSelector",720,480,true); 你也可以透過 File Selector 為建立新的檔案名命，例子如下： var uid…