使用文件選取器通過(guò)讓用戶選取文件和文件夾來(lái)訪問(wèn)文件和文件夾。你可以使用 fileOpenPicker 類獲取對(duì)文件的訪問(wèn)，使用 folderPicker 獲取對(duì)文件夾的訪問(wèn)。

Prerequisites

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

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

文件選取器 UI

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

顯示的信息包括：

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

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

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

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

文件選取器示例展示了如何使用 fileOpenPicker 來(lái)讓用戶選取單個(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)用可以顯示文件選取器。這可以通過(guò)以下兩種方式來(lái)實(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。你可以通過(guò)在創(chuàng)建的對(duì)象上設(shè)置屬性來(lái)自定義此類。

文件選取器示例展示了如何創(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è)置某些屬性以在文件選取器示例中自定義文件選取器的說(shuō)明，請(qǐng)繼續(xù)閱讀。

文件選取器示例 fileOpenPicker 自定義，已說(shuō)明

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

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

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

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

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

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

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

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

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

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

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

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

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

3.顯示 fileOpenPicker

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

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

在你創(chuàng)建并自定義文件選取器之后，讓用戶通過(guò)調(diào)用 fileOpenPicker.pickSingleFileAsync 來(lái)選取一個(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è)文件選取器之后，讓用戶通過(guò)調(diào)用 fileOpenPicker.pickMultipleFilesAsync 來(lái)選取多個(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

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

文件選取器示例展示了如何使用 folderPicker 來(lái)讓用戶選取單個(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è)文件夾的過(guò)程

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

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

每次你需要調(diào)用文件選取器時(shí)，你必須首先確保你的應(yīng)用可以顯示文件選取器。這可以通過(guò)以下兩種方式來(lái)實(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。你可以通過(guò)在創(chuàng)建的對(duì)象上設(shè)置屬性來(lái)自定義此類。

文件選取器示例展示了如何創(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è)置某些屬性以在文件選取器示例中自定義文件選取器的說(shuō)明，請(qǐng)繼續(xù)閱讀。

文件選取器示例 FolderPicker 自定義，已說(shuō)明

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

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

如果你使用文件選取器來(lái)顯示諸如圖片或視頻等可視文件，則應(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è)熟悉的、高度使用的位置開(kāi)始。

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

#p#

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

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

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

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

用戶僅可以通過(guò) folderPicker 選擇文件夾，他將無(wú)法選擇單個(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 之后，讓用戶通過(guò)調(diào)用 folderPicker.pickSingleFolderAsync 來(lái)選取一個(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