Window: showOpenFilePicker() 方法

語法

showOpenFilePicker()
showOpenFilePicker(options)

引數

options 可選

包含選項的物件，選項如下：

excludeAcceptAllOption 可選

一個布林值，預設為 false。預設情況下，檔案選擇器應包含一個不應用任何檔案型別過濾器（透過下面的 type 選項啟用）的選項。將此選項設定為 true 意味著該選項將不可用。

id 可選

透過指定 ID，瀏覽器可以為不同的 ID 記住不同的目錄。如果將相同的 ID 用於另一個選擇器，則該選擇器將在同一目錄中開啟。

multiple 可選

一個布林值，預設為 false。當設定為 true 時，可以選擇多個檔案。

startIn 可選

一個 FileSystemHandle 或一個眾所周知的目錄（"desktop"、"documents"、"downloads"、"music"、"pictures" 或 "videos"），用於開啟對話方塊。

types 可選

一個 Array，包含允許選擇的檔案型別。每個專案都是一個包含以下選項的物件：

description 可選

允許的檔案型別類別的可選描述。預設為空字串。

accept

一個 Object，其鍵設定為 MIME 型別，值設定為副檔名的 Array（參見下面的示例）。

返回值

一個 Promise，其 fulfillment 處理程式接收一個 FileSystemFileHandle 物件陣列。

異常

AbortError DOMException

如果使用者在未進行選擇的情況下取消提示，或者使用者代理認為任何選定的檔案過於敏感或危險，則丟擲此錯誤。

SecurityError DOMException

如果呼叫被 同源策略 阻止，或者不是透過使用者互動（例如按鈕按下）呼叫，則丟擲此錯誤。

TypeError

如果接受型別無法處理，則丟擲此錯誤，這可能發生在以下情況：

• types 選項中任何專案的 accept 選項的任何鍵字串無法解析為有效的 MIME 型別。
• types 選項中任何專案的 accept 選項的任何值字串無效，例如，如果它不是以 . 開頭或以 . 結尾，或者如果它包含任何無效的程式碼點且其長度超過 16。
• types 選項為空且 excludeAcceptAllOption 選項為 true。

安全

需要瞬時使用者啟用。使用者必須與頁面或 UI 元素進行互動才能使此功能正常工作。

示例

在這裡，我們設定了要傳遞給方法的選項物件。我們將允許選擇影像檔案型別，沒有允許所有檔案型別的選項，也沒有多檔案選擇。

const pickerOpts = {
  types: [
    {
      description: "Images",
      accept: {
        "image/*": [".png", ".gif", ".jpeg", ".jpg"],
      },
    },
  ],
  excludeAcceptAllOption: true,
  multiple: false,
};

接下來，我們可以建立一個非同步函式來顯示檔案選擇器並返回選定的檔案。

// create a reference for our file handle
let fileHandle;

async function getFile() {
  // open file picker, destructure the one element returned array
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // run code with our fileHandle
}

規範

瀏覽器相容性

另見

• File System API
• 檔案系統訪問 API：簡化對本地檔案的訪問