JavaScript中怎么使用文件選取器訪問文件

這篇文章主要講解了“JavaScript中怎么使用文件選取器訪問文件”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JavaScript中怎么使用文件選取器訪問文件”吧！

使用文件選取器通過讓用戶選取文件和文件夾來訪問文件和文件夾。你可以使用 fileOpenPicker 類獲取對文件的訪問，使用 folderPicker 獲取對文件夾的訪問。

Prerequisites

• 了解 JavaScript 中 Windows 應(yīng)用商店應(yīng)用的異步編程

在快速入門：在 JavaScript 中使用承諾中了解如何編寫異步應(yīng)用。

文件選取器 UI

文件選取器在屏幕頂部和底部都有顯示信息的區(qū)域，用于定向用戶并在用戶訪問或保持文件時提供一致的體驗(yàn)。

顯示的信息包括：

• 當(dāng)前位置（位于左上角）

• 用戶選擇的項(xiàng)目籃（沿著底部）

• 用戶可以瀏覽的位置的下拉列表（可以從左上角的下拉符號中選擇）

例如，此屏幕截圖顯示一個已調(diào)用的文件選取器，使用該選取器用戶可以選擇某些文件。在此屏幕截圖中，用戶已選擇兩個文件。

用戶可以通過選擇文件選取器左上角的下拉符號來查看可用位置的下拉列表，如右側(cè)屏幕截圖中顯示的列表。這些位置包含文件系統(tǒng)位置，比如“音樂庫”或“下 載”文件夾。它們還包含其他應(yīng)用（如果這些應(yīng)用（如 Microsoft  SkyDrive）參加文件選取器合約），你可以在屏幕截圖中的列表底部看到這些應(yīng)用。

完成代碼來選取一個文件

文件選取器示例展示了如何使用 fileOpenPicker 來讓用戶選取單個文件。

// Verify that we are currently not snapped, or that we can unsnap to open the picker var currentState = Windows.UI.ViewManagement.ApplicationView.value; if (currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped &&     !Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {     // Fail silently if we can't unsnap     return; }  // Create the picker object and set options var openPicker = new Windows.Storage.Pickers.FileOpenPicker(); openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail; openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary; // Users expect to have a filtered view of their folders depending on the scenario. // For example, when choosing a documents folder, restrict the filetypes to documents for your application. openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);  // Open the picker for the user to pick a file openPicker.pickSingleFileAsync().then(function (file) {     if (file) {         // Application now has read/write access to the picked file         WinJS.log && WinJS.log("Picked photo: " + file.name, "sample", "status");     } else {         // The picker was dismissed with no selected file         WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");     } });

有關(guān)用于選取多個文件的完整代碼，請參閱文件選取器示例。

Warning  如果嘗試在你的應(yīng)用處于貼靠狀態(tài)時顯示文件選取器，文件選取器將不顯示并將引發(fā)異常。在調(diào)用文件選取器前確保應(yīng)用未進(jìn)行貼靠或?qū)⑵淙∠N靠，可避免出現(xiàn)這種情況。 下面的代碼示例和文件選取器示例介紹如何進(jìn)行上述操作。

選取一個文件的演練

調(diào)用文件選取器需要三個基本任務(wù)：確保文件選取器可以進(jìn)行調(diào)用，創(chuàng)建并自定義文件選取器對象，以及顯示文件選取器以使用戶可以選取一個或多個項(xiàng)目。

1.確保你可以調(diào)用文件選取器

每次你需要調(diào)用文件選取器時，你必須首先確保你的應(yīng)用可以顯示文件選取器。這可以通過以下兩種方式來實(shí)現(xiàn)：確認(rèn)你的應(yīng)用未進(jìn)行貼靠，或者如果你的應(yīng)用已進(jìn)行貼靠，則取消貼靠以便顯示文件選取器。

文件選取器示例展示了在示例創(chuàng)建和顯示文件選取器之前如何檢查應(yīng)用的 ApplicationView.value 以及如何嘗試取消貼靠。

// Verify that we are currently not snapped, or that we can unsnap to open the picker var currentState = Windows.UI.ViewManagement.ApplicationView.value; if (currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped &&     !Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {     // Fail silently if we can't unsnap     return; }

Warning  如果嘗試在你的應(yīng)用處于貼靠狀態(tài)時顯示文件選取器，調(diào)用將失敗，且你將遇到異常。

2.創(chuàng)建和自定義 fileOpenPicker

如果用戶拾取一個或多個文件，請使用 fileOpenPicker。你可以通過在創(chuàng)建的對象上設(shè)置屬性來自定義此類。

文件選取器示例展示了如何創(chuàng)建并自定義一個 fileOpenPicker。

// Create the picker object and set options var openPicker = new Windows.Storage.Pickers.FileOpenPicker(); openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail; openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary; // Users expect to have a filtered view of their folders depending on the scenario. // For example, when choosing a documents folder, restrict the filetypes to documents for your application. openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);

你應(yīng)該在文件選取器對象上設(shè)置與你的用戶和你的應(yīng)用相關(guān)的屬性。有關(guān)幫助你確定如何自定義文件選取器的指南，請參閱文件選取器指南和清單。有關(guān)我們?yōu)楹卧O(shè)置某些屬性以在文件選取器示例中自定義文件選取器的說明，請繼續(xù)閱讀。

文件選取器示例 fileOpenPicker 自定義，已說明

文件選取器示例在某個方便的位置創(chuàng)建一種豐富的圖片視覺顯示，用戶可以通過設(shè)置以下三個 fileOpenPicker 屬性從該位置選取: viewMode、suggestedStartLocation 和 fileTypeFilter 屬性。

• 將 openPicker.viewMode 設(shè)置為 thumbnail PickerViewMode 枚舉值會通過使用圖片縮略圖創(chuàng)建一種豐富的視覺顯示來表示文件選取器中的文件。

openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;

如果你使用文件選取器來顯示諸如圖片或視頻等可視文件，則應(yīng)該考慮將 viewMode 設(shè)置為 PickerViewMode.thumbnail。否則，請使用 PickerViewMode.list。

在某些情況下，用戶可能需要選取圖片或視頻，或任何其他種類文件。例如，用戶可能會選取某個文件以附加到某個電子郵件或通過 IM 發(fā)送。 在這種情況下，你應(yīng)該通過將兩個 UI 控件添加到你的應(yīng)用來同時支持全部兩種視圖模式。一個控件應(yīng)該通過使用 thumbnail 視圖模式調(diào)用文件選取器，這樣用戶可以選取圖片和視頻。另一個控件應(yīng)該通過使用 list 視圖模式調(diào)用文件選取器，這樣用戶可以選取其他種類的文件。例如，郵件應(yīng)用會有兩個按鈕：“附加圖片或視頻”和“附加文檔”。

• 使用 PickerLocationId.picturesLibrary 將 openPicker.suggestedStartLocation 設(shè)置為圖片庫可讓用戶在他們有可能找到圖片的某個位置開始。

openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;

你應(yīng)該將 suggestedStartLocation 設(shè)置為適合將選取的文件類型的文件系統(tǒng)位置。如果用戶要選取音樂、圖片或視頻，請分別將開始位置設(shè)置為音樂庫、圖片庫或視頻庫。對于所有其他類型的文件，請將開始位置設(shè)置為文檔庫。這只是一個開始位置。用戶可以在使用文件選取器時導(dǎo)航到其他位置。

此外，并不會始終將 suggestedStartLocation 用作文件選取器的開始位置。為了給用戶提供一致的感覺，文件選取器會記住用戶查看過的上一個位置且通常將在該位置開始。

• 使用 openPicker.fileTypeFilter.replaceAll 來指定用戶可以在文件選取器中看到的文件類型，這可讓我們保持用戶專注于選取相關(guān)和可用的文件。

openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);

你應(yīng)該考慮指定要在文件選取器中顯示的文件類型，以幫助保持被顯示的文件相關(guān)。例如，如果你的應(yīng)用是一個視頻播放器，那么你可以使用 fileTypeFilter 屬性來確保在文件選取器中顯示的文件使用你的播放器支持的視頻格式，基于視頻文件名擴(kuò)展名。

如果你需要將文件類型添加到 fileTypeFilter，而不是替換條目，那么你可以使用 append 方法，而不是 replaceAll。

3.顯示 fileOpenPicker

你現(xiàn)在可以顯示文件選取器，這樣用戶可以選取單個文件或多個文件：

• 顯示，以便用戶可以選取單個文件

在你創(chuàng)建并自定義文件選取器之后，讓用戶通過調(diào)用 fileOpenPicker.pickSingleFileAsync 來選取一個文件。用戶選取文件時，fileOpenPicker.pickSingleFileAsync 返回一個表示已選取文件的 storageFile 對象。

文件選取器示例展示了如何顯示文件選取器以便讓用戶選擇一個文件，以及如何捕獲已選取的文件以進(jìn)行處理。

/ Open the picker for the user to pick a file openPicker.pickSingleFileAsync().then(function (file) {     if (file) {         // Application now has read/write access to the picked file         WinJS.log && WinJS.log("Picked photo: " + file.name, "sample", "status");     } else {         // The picker was dismissed with no selected file         WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");     } });

當(dāng)openPicker.pickSingleFileAsync 調(diào)用完成時，會將已選取的文件（由 storageFile 對象表示）傳遞給函數(shù)文本，以作為 file 參數(shù)進(jìn)行處理。如果已取消該操作且未選取任何對象，那么此參數(shù)將為 null。

• 顯示，以便用戶可以選取多個文件

在你創(chuàng)建并自定義某個文件選取器之后，讓用戶通過調(diào)用 fileOpenPicker.pickMultipleFilesAsync 來選取多個文件。

用戶選取多個文件時，fileOpenPicker.pickMultipleFilesAsync 將返回表示已選取的多個文件的 storageFile 對象列表。

文件選取器示例展示了如何顯示文件選取器以便讓用戶選擇多個文件，以及如何捕獲已選取文件的列表進(jìn)行處理。

openPicker.pickMultipleFilesAsync().then(function (files) {     if (files.size > 0) {         // Application now has read/write access to the picked file(s)         var outputString = "Picked files:\n";         for (var i = 0; i < files.size; i++) {             outputString = outputString + files[i].name + "\n";         }         WinJS.log && WinJS.log(outputString, "sample", "status");     } else {         // The picker was dismissed with no selected file         WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");     } });

當(dāng) openPicker.pickMultipleFilesAsync 調(diào)用完成時，會將已選取文件的列表傳遞給函數(shù)文本，以作為 files 參數(shù)進(jìn)行處理。列表中的已選取文件由 storageFile 對象表示。如果已取消該操作且未選取任何對象，那么此參數(shù)的大小將大于 0

完成代碼來選取一個文件夾

文件選取器示例展示了如何使用 folderPicker 來讓用戶選取單個文件夾。

// Verify that we are currently not snapped, or that we can unsnap to open the picker var currentState = Windows.UI.ViewManagement.ApplicationView.value; if (currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped &&     !Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {     // Fail silently if we can't unsnap     return; }  // Create the picker object and set options var folderPicker = new Windows.Storage.Pickers.FolderPicker; folderPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.desktop; // Users expect to have a filtered view of their folders depending on the scenario. // For example, when choosing a documents folder, restrict the filetypes to documents for your application. folderPicker.fileTypeFilter.replaceAll([".docx", ".xlsx", ".pptx"]);  folderPicker.pickSingleFolderAsync().then(function (folder) {     if (folder) {         // Application now has read/write access to all contents in the picked folder (including sub-folder contents)         // Cache folder so the contents can be accessed at a later time         Windows.Storage.AccessCache.StorageApplicationPermissions.futureAccessList.addOrReplace("PickedFolderToken", folder);         WinJS.log && WinJS.log("Picked folder: " + folder.name, "sample", "status");     } else {         // The picker was dismissed with no selected file         WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");     } });

Warning  如果嘗試在你的應(yīng)用處于貼靠狀態(tài)時顯示文件選取器，文件選取器將不顯示并將引發(fā)異常。在調(diào)用文件選取器前確保應(yīng)用未進(jìn)行貼靠或?qū)⑵淙∠N靠，可避免出現(xiàn)這種情況。 下面的代碼示例和文件選取器示例介紹如何進(jìn)行上述操作。

選取一個文件夾的過程

調(diào)用文件選取器需要三個基本任務(wù)：確保文件選取器可以進(jìn)行調(diào)用，創(chuàng)建并自定義文件選取器對象，以及顯示文件選取器以使用戶可以選取一個或多個項(xiàng)目。

1.確保你可以調(diào)用文件選取器

每次你需要調(diào)用文件選取器時，你必須首先確保你的應(yīng)用可以顯示文件選取器。這可以通過以下兩種方式來實(shí)現(xiàn)：確認(rèn)你的應(yīng)用未進(jìn)行貼靠，或者如果你的應(yīng)用已進(jìn)行貼靠，請確認(rèn)可以取消貼靠它以便顯示文件選取器。

文件選取器示例展示了在示例創(chuàng)建和顯示文件選取器之前如何檢查應(yīng)用的 ApplicationView.value 以及如何嘗試取消貼靠。

// Verify that we are currently not snapped, or that we can unsnap to open the picker var currentState = Windows.UI.ViewManagement.ApplicationView.value; if (currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped &&     !Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {     // Fail silently if we can't unsnap     return; }

Warning  如果嘗試在你的應(yīng)用處于貼靠狀態(tài)時顯示文件選取器，調(diào)用將失敗，且你將遇到異常。

2.創(chuàng)建和自定義 folderPicker

如果用戶拾取一個文件夾，請使用 folderPicker。你可以通過在創(chuàng)建的對象上設(shè)置屬性來自定義此類。

文件選取器示例展示了如何創(chuàng)建并自定義一個 folderPicker。

// Create the picker object and set options var folderPicker = new Windows.Storage.Pickers.FolderPicker; folderPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.desktop; // Users expect to have a filtered view of their folders depending on the scenario. // For example, when choosing a documents folder, restrict the filetypes to documents for your application. folderPicker.fileTypeFilter.replaceAll([".docx", ".xlsx", ".pptx"]);

你應(yīng)該在文件選取器對象上設(shè)置與你的用戶和你的應(yīng)用相關(guān)的屬性。有關(guān)幫助你確定如何自定義文件選取器的指南，請參閱文件選取器指南和清單。有關(guān)我們?yōu)楹卧O(shè)置某些屬性以在文件選取器示例中自定義文件選取器的說明，請繼續(xù)閱讀。

文件選取器示例 FolderPicker 自定義，已說明

文件選取器示例通過使用以下三個 folderPicker 屬性來自定義文件選取器，以選取文件夾：viewMode、suggestedStartLocation 和 fileTypeFilter 屬性。

• 為 folderPicker.viewMode 使用默認(rèn) PickerViewMode.list 可讓我們在文件選取器中創(chuàng)建一個類似列表的顯示。此列表適合選擇不是很直觀的文件，比如以下文檔。

如果你使用文件選取器來顯示諸如圖片或視頻等可視文件，則應(yīng)該考慮將 viewMode 設(shè)置為 PickerViewMode.thumbnail。否則，請使用 PickerViewMode.list。

如果你要顯示諸如圖片或視頻等可視文件，你應(yīng)該將 folderPicker.viewMode 設(shè)置為 thumbnail，比如：

folderPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;

• 使用 PickerLocationId.desktop 將 folderPicker.suggestedStartLocation 設(shè)置為用戶的桌面可讓用戶在某個熟悉的、高度使用的位置開始。

folderPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.desktop;

你應(yīng)該將 suggestedStartLocation 設(shè)置為適合用戶希望選取的文件夾類型的文件系統(tǒng)位置。例如，如果用戶要選取包含音樂文件的文件夾，你應(yīng)該在音樂庫中開始它們。這只是一個開始位置；用戶可以在使用文件選取器時導(dǎo)航到其他位置。

此外，并不會始終將 suggestedStartLocation 用作文件選取器的開始位置。為了給用戶提供一致的感覺，文件選取器會記住用戶查看過的上一個位置且通常將在該位置開始。

• 使用 folderPicker.fileTypeFilter.replaceAll 來指定用戶可以在文件選取器中看到的文件類型，這可讓我們保持用戶專注于選取相關(guān)文件夾。

folderPicker.fileTypeFilter.replaceAll([".docx", ".xlsx", ".pptx"]);

用戶僅可以通過 folderPicker 選擇文件夾，他將無法選擇單個文件。但是，在 folderPicker 中顯示相關(guān)文件可幫助用戶確定他們需要選擇哪個文件夾。例如，當(dāng)使用 folderPicker 選擇要從其導(dǎo)入圖片的某個位置時，顯示圖像文件可幫助用戶確定當(dāng)選擇該位置時將導(dǎo)入哪些項(xiàng)目。

3.顯示 folderPicker，以便用戶可以選取單個文件夾

在你創(chuàng)建并自定義 folderPicker 之后，讓用戶通過調(diào)用 folderPicker.pickSingleFolderAsync 來選取一個文件夾。用戶選取文件夾時，folderPicker.pickSingleFolderAsync 返回一個表示已選取文件的 storageFolder。 你應(yīng)該使用 done 捕獲和處理此文件夾，以便這些例外會正確傳播。

文件選取器示例展示了如何顯示文件選取器以便讓用戶選擇一個文件夾，以及如何捕獲已選取的文件夾以進(jìn)行處理。

folderPicker.pickSingleFolderAsync().then(function (folder) {     if (folder) {         // Application now has read/write access to all contents in the picked folder (including sub-folder contents)         // Cache folder so the contents can be accessed at a later time         Windows.Storage.AccessCache.StorageApplicationPermissions.futureAccessList.addOrReplace("PickedFolderToken", folder);         WinJS.log && WinJS.log("Picked folder: " + folder.name, "sample", "status");     } else {         // The picker was dismissed with no selected file         WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");     } });

當(dāng) folderPicker.pickSingleFolderAsync 調(diào)用完成時，會將已選取文件夾傳遞給函數(shù)文本，以作為 folder 參數(shù)進(jìn)行處理。 已選取文件夾是由 storageFolder 對象表示的。如果已取消該操作且未選取任何對象，那么此參數(shù)將為 null。

感謝各位的閱讀，以上就是“JavaScript中怎么使用文件選取器訪問文件”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對JavaScript中怎么使用文件選取器訪問文件這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！