為什麼會問「是否要上傳這些檔案」

按下「選擇資料夾」之後,瀏覽器會跳出類似這樣的對話框:

要將 128 個檔案上傳到這個網站嗎?

看起來很嚇人,實際上這個工具沒有上傳任何東西。這一章解釋那句話是什麼、 以及你要怎麼自己確認。

那句話是瀏覽器說的,不是網頁說的

當網頁要求讀取整個資料夾(而不是單一檔案)時,Chrome 與 Firefox 會跳出這個警告。 它講的是授權範圍:「你即將把這個資料夾裡所有檔案的內容交給這個網頁,它有能力上傳」。

它不是在描述正在發生的事。就像手機問你「要允許這個 App 使用相機嗎」, 不代表相機正在錄影。

⚠️ 網頁沒辦法改掉這個對話框:攔不到、改不了字、也無法事先宣告「我不會上傳」。 所以只能在按鈕旁邊寫一行說明 —— 工具裡那行小字就是為此存在的,不是贅字。

這個工具實際做了什麼

拿到檔案清單之後,所有動作都用瀏覽器內建的本機 API 完成:

你看到的怎麼來的
縮圖與預覽URL.createObjectURL 直接在瀏覽器裡開檔
檔名、大小、日期檔案物件本身就帶著這些欄位
篩選、搜尋、排序在記憶體裡對清單做運算

沒有任何一步需要伺服器。這個站台的角色只是把一份 HTML 送給你,之後就沒它的事了。

怎麼自己確認

不用相信這頁寫的字,你可以直接看:

  1. F12 開啟開發者工具,切到 Network(網路) 分頁
  2. 勾選保留紀錄,然後選一個資料夾、隨便瀏覽幾張圖
  3. 看有沒有任何送往外部的請求

你會看到的只有一開始載入頁面本身。選檔案與瀏覽的過程中不會產生任何新的網路請求。

為什麼不換成不會跳警告的做法

Chrome 有另一個 API(showDirectoryPicker)提示比較溫和,但只有 Chromium 系瀏覽器有 —— Firefox 與 Safari 上整支工具會直接不能用。

現在用的 webkitdirectory 相容範圍廣得多,代價就是那個嚇人的對話框。 兩害相權,選了「能用的人比較多」+ 一行說明。

(真要兩者兼得,做法是漸進增強:有 showDirectoryPicker 就用它、沒有就退回 webkitdirectory。 那是另一件事,目前沒有做。)

順帶一提:這個工具連改檔案的權限都沒有

webkitdirectory 給的是唯讀的檔案快照。這個工具不能改名、不能刪除、不能移動、 也不能寫入任何東西 —— 就算它想,也沒有那個權限。

(站上另一支工具 Markdown Editor 確實可以直接覆寫硬碟上的檔案, 但那用的是另一組需要額外授權的 API,而且每次都會明確問你。)

下載這一頁的 .md 原始檔 用編輯器打開它,就是一份現成的範例文件。

← 回手冊目錄