按下「選擇資料夾」之後,瀏覽器會跳出類似這樣的對話框:
要將 128 個檔案上傳到這個網站嗎?
看起來很嚇人,實際上這個工具沒有上傳任何東西。這一章解釋那句話是什麼、 以及你要怎麼自己確認。
當網頁要求讀取整個資料夾(而不是單一檔案)時,Chrome 與 Firefox 會跳出這個警告。 它講的是授權範圍:「你即將把這個資料夾裡所有檔案的內容交給這個網頁,它有能力上傳」。
它不是在描述正在發生的事。就像手機問你「要允許這個 App 使用相機嗎」, 不代表相機正在錄影。
⚠️ 網頁沒辦法改掉這個對話框:攔不到、改不了字、也無法事先宣告「我不會上傳」。 所以只能在按鈕旁邊寫一行說明 —— 工具裡那行小字就是為此存在的,不是贅字。
拿到檔案清單之後,所有動作都用瀏覽器內建的本機 API 完成:
| 你看到的 | 怎麼來的 |
|---|---|
| 縮圖與預覽 | URL.createObjectURL 直接在瀏覽器裡開檔 |
| 檔名、大小、日期 | 檔案物件本身就帶著這些欄位 |
| 篩選、搜尋、排序 | 在記憶體裡對清單做運算 |
沒有任何一步需要伺服器。這個站台的角色只是把一份 HTML 送給你,之後就沒它的事了。
不用相信這頁寫的字,你可以直接看:
F12 開啟開發者工具,切到 Network(網路) 分頁你會看到的只有一開始載入頁面本身。選檔案與瀏覽的過程中不會產生任何新的網路請求。
Chrome 有另一個 API(showDirectoryPicker)提示比較溫和,但只有 Chromium 系瀏覽器有 ——
Firefox 與 Safari 上整支工具會直接不能用。
現在用的 webkitdirectory 相容範圍廣得多,代價就是那個嚇人的對話框。
兩害相權,選了「能用的人比較多」+ 一行說明。
(真要兩者兼得,做法是漸進增強:有 showDirectoryPicker 就用它、沒有就退回 webkitdirectory。
那是另一件事,目前沒有做。)
webkitdirectory 給的是唯讀的檔案快照。這個工具不能改名、不能刪除、不能移動、
也不能寫入任何東西 —— 就算它想,也沒有那個權限。
(站上另一支工具 Markdown Editor 確實可以直接覆寫硬碟上的檔案, 但那用的是另一組需要額外授權的 API,而且每次都會明確問你。)
下載這一頁的 .md 原始檔 用編輯器打開它,就是一份現成的範例文件。