寫多檔上傳的AP的劇本

寫多檔上傳的AP, 這個還滿常見的, 像是 gmail 裡, 可以在form 沒有submit 的情況下, 上傳很多的附件檔案.

我想到寫法, 有2種:
方案 1. 使用 tokenID 與 temp table 來暫存資料, 會多2個步驟, 但可以適用於比較多的情況.
方案 2. 不使用 tokenID, 適用於比較簡單的情況, user 在上傳檔案後, 就把實體檔案名稱暫存到 user 正在輸入的form 裡的一個 hidden 欄位裡.

名詞解釋: tokenID 就是到 bank 排隊時抽的號碼牌, 每個人都會抽到不同的流水號.


這次要詳細介紹的是方案1裡的細部流程.
下面的劇本, 總共用到
table 1: 流水號專用table.
table 2: 資料主檔table.
table 3: 附件temp table.
table 4: 附件主檔table.

1. 產生 Form, 並抽一張號碼牌 (tokenID).
1.1 是 "新增" 的情況下, 先顯示一個 html form 給 user 做輸入,
1.2 是 "修改" 的情況下. 要先把附件, 從 附件主檔table copy 資料到 附件temp table 裡.

2. 在 form 裡, 放一個 flash object, 讓 user 可以選取用戶端檔案,

3. 在 user 選完檔案時, 透過 flash 先存取到用戶端檔案名稱, 再透過 javascript, 動態產生一行附件的資訊(包括 附件在用的 fileid)在 form 的 UI 中.

4. 在 flash 上傳中, 不斷地更新目前上傳的進度. (ex: 上傳了 ??%) 在畫面上, 或使用 progress bar.

5. 在 flash 上傳完成後, 更新附件的資訊為 "已完成" 在 form 的 UI 中. 如果是選擇方案2的話, 就是在這一個步驟, 把附件的流水號, 或是實體檔名 queue 在 hidden 欄位即可完成多檔上傳.

6. 在這一個步驟, 使用ajax 的方式, 把一開始取得到的 tokenID 和檔案資訊(包括 附件在用的 fileid), 存入 附件temp table.

7. user 按下 "新增存檔" 或 "確認編輯" 的 submit button.

8. 把 user 所填的內容, insert (或 update) 進主檔, 並取得主檔資料的流水號(identity).

9. 把透過 flash object 上傳到 附件temp folder 裡的實體檔案, 搬家到系統專門放附件的資料夾裡.

10. 透過 tokenID(號碼牌) 到 附件temp table 裡, 把 user 剛輸入的附件的資訊(例如:標題,或是否公開...等欄位)再更新回 附件temp table 中.

11. user 有 "新增" 附件的時候, 就透過 tokenID(號碼牌) 取出 附件temp table 裡的資料, 再加上 主檔資料的流水號(identity) 後, insert 回去附件主題 table, 如果是 "編修" 即有附件的狀態, 就是用 update 的方式, 把 temp table 裡的值, update 回去 附件 table.

12. 刪掉 temp table 裡的同一個 tokenID 的資料.

13. 完成.


如果, 要參考看看相關的 table schema 或 code, 可以與我聯絡.

附註: 我使用的 flash 上傳元件, 是 swfupload, google 一下 swfupload 就可以看到很多相關教學與範例.