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

Prerequisites

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

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

文件選取器 UI

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

顯示的信息包括：

• 當(dāng)前位置（位于左上角）
• 用戶選擇的項(xiàng)目籃（沿著底部）
• 用戶可以瀏覽的位置的下拉列表（可以從左上角的下拉符號(hào)中選擇）

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

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

完成代碼來選取一個(gè)文件

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

// 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)用于選取多個(gè)文件的完整代碼，請(qǐng)參閱文件選取器示例。

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

選取一個(gè)文件的演練

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

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

每次你需要調(diào)用文件選取器時(shí)，你必須首先確保你的應(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)時(shí)顯示文件選取器，調(diào)用將失敗，且你將遇到異常。

#p#

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

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

文件選取器示例展示了如何創(chuàng)建并自定義一個(gè) 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)該在文件選取器對(duì)象上設(shè)置與你的用戶和你的應(yīng)用相關(guān)的屬性。有關(guān)幫助你確定如何自定義文件選取器的指南，請(qǐng)參閱文件選取器指南和清單。有關(guān)我們?yōu)楹卧O(shè)置某些屬性以在文件選取器示例中自定義文件選取器的說明，請(qǐng)繼續(xù)閱讀。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.顯示 fileOpenPicker

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

• 顯示，以便用戶可以選取單個(gè)文件

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

文件選取器示例展示了如何顯示文件選取器以便讓用戶選擇一個(gè)文件，以及如何捕獲已選取的文件以進(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"); 
    } 
}); 

#p#

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

• 顯示，以便用戶可以選取多個(gè)文件

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

用戶選取多個(gè)文件時(shí)，fileOpenPicker.pickMultipleFilesAsync 將返回表示已選取的多個(gè)文件的 storageFile 對(duì)象列表。

文件選取器示例展示了如何顯示文件選取器以便讓用戶選擇多個(gè)文件，以及如何捕獲已選取文件的列表進(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í)，會(huì)將已選取文件的列表傳遞給函數(shù)文本，以作為 files 參數(shù)進(jìn)行處理。列表中的已選取文件由 storageFile 對(duì)象表示。如果已取消該操作且未選取任何對(duì)象，那么此參數(shù)的大小將大于 0

完成代碼來選取一個(gè)文件夾

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

// 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)時(shí)顯示文件選取器，文件選取器將不顯示并將引發(fā)異常。在調(diào)用文件選取器前確保應(yīng)用未進(jìn)行貼靠或?qū)⑵淙∠N靠，可避免出現(xiàn)這種情況。 下面的代碼示例和文件選取器示例介紹如何進(jìn)行上述操作。

選取一個(gè)文件夾的過程

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

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

每次你需要調(diào)用文件選取器時(shí)，你必須首先確保你的應(yīng)用可以顯示文件選取器。這可以通過以下兩種方式來實(shí)現(xiàn)：確認(rèn)你的應(yīng)用未進(jìn)行貼靠，或者如果你的應(yīng)用已進(jìn)行貼靠，請(qǐng)確認(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)時(shí)顯示文件選取器，調(diào)用將失敗，且你將遇到異常。

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

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

文件選取器示例展示了如何創(chuàng)建并自定義一個(gè) 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)該在文件選取器對(duì)象上設(shè)置與你的用戶和你的應(yīng)用相關(guān)的屬性。有關(guān)幫助你確定如何自定義文件選取器的指南，請(qǐng)參閱文件選取器指南和清單。有關(guān)我們?yōu)楹卧O(shè)置某些屬性以在文件選取器示例中自定義文件選取器的說明，請(qǐng)繼續(xù)閱讀。

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

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

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

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

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

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

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

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

#p#

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

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

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

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

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

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

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

文件選取器示例展示了如何顯示文件選取器以便讓用戶選擇一個(gè)文件夾，以及如何捕獲已選取的文件夾以進(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í)，會(huì)將已選取文件夾傳遞給函數(shù)文本，以作為 folder 參數(shù)進(jìn)行處理。 已選取文件夾是由 storageFolder 對(duì)象表示的。如果已取消該操作且未選取任何對(duì)象，那么此參數(shù)將為 null。

原文鏈接：http://msdn.microsoft.com/zh-cn/library/windows/apps/hh465199.aspx