說到要在 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…