如何透過檔案選擇器儲存檔案 (HTML)

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

使用 fileSavePicker 讓使用者指定用來儲存您應用程式內容的名稱和位置。

先決條件

了解使用 JavaScript 之 Windows 執行階段應用程式的非同步程式設計

您可以在快速入門：在 JavaScript 中使用 Promise 了解如何撰寫非同步應用程式。

指示

步驟 1: 建立和自訂檔案選擇器，顯示使用者可以儲存的位置

使用 fileSavePicker 讓使用者可以指定儲存檔案的名稱、類型及位置。在您建立的 fileSavePicker 上設定屬性，即可自訂檔案選擇器。

檔案選擇器範例會示範如何建立和自訂 fileSavePicker 物件。

// Create the picker object and set options
var savePicker = new Windows.Storage.Pickers.FileSavePicker();
savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
// Dropdown of file types the user can save the file as
savePicker.fileTypeChoices.insert("Plain Text", [".txt"]);
// Default file name if the user does not type one in or select a file to replace
savePicker.suggestedFileName = "New Document";

您應該設定與您使用者和應用程式相關的 fileSavePicker 屬性。如需協助您決定如何自訂檔案選擇器的指導方針，請參閱檔案選擇器的指導方針和檢查清單。

檔案選擇器範例設定三個 fileSavePicker 屬性來自訂檔案選擇器：suggestedStartLocation、fileTypeChoices 及 suggestedFileName 屬性。

注意 fileSavePicker 物件使用 pickerViewMode.list 來顯示資料。

JJ150595.wedge(zh-tw,WIN.10).gif 詳細自訂 fileSavePicker

因為使用者要儲存文件或文字檔，所以範例會使用 LocalFolder 將 savePicker.suggestedStartLocation 設定成應用程式的本機資料夾。
```
savePicker.suggestedStartLocation = Windows.Storage.ApplicationData.localFolder;
```
您應該將 suggestedStartLocation 設定成所挑選之檔案類型適用的檔案系統位置。如果使用者要挑選音樂、圖片或影片，請將開始位置分別設定為 [音樂]、[圖片] 或 [影片]。對於所有其他類型的檔案，請將開始位置設定成應用程式的本機資料夾。這只是開始的位置。使用者使用檔案選擇器時可以瀏覽到其他位置。
因為我們要確認應用程式能夠在儲存檔案之後予以開啟，所以範例使用範例支援的 savePicker.fileTypeChoices.insert 來指定檔案類型 (Microsoft Word 文件與文字檔)。
```
savePicker.fileTypeChoices.insert("Plain Text", [".txt"]);
```
確認應用程式可支援您指定的所有檔案類型。

使用者能夠將檔案儲存成您在這個清單中指定的任何檔案類型。使用者也可以從檔案選擇器右下角的下拉式控制項選取 (您指定的) 不同檔案類型來變更檔案類型。預設會選取清單中的第一個檔案類型選項。若要變更預設選取的檔案類型，請設定 savePicker.defaultFileExtension 屬性。

注意因為檔案選擇器也會使用目前選取的檔案類型來篩選它顯示的檔案，所以只會為使用者顯示符合所選檔案類型的檔案類型。
因為我們要為使用者省掉輸入的麻煩，所以範例針對要儲存的檔案設定 savePicker.suggestedFileName。
```
savePicker.suggestedFileName = "New Document";
```
您建議的檔案名稱應該盡可能與使用者要儲存的檔案相關。例如，就 Word 而言，您可以建議現有的檔案名稱 (如果已經有的話)，或是文件第一行 (如果使用者儲存的檔案尚未命名)。

步驟 2: 顯示 fileSavePicker 以儲存檔案

建立和自訂檔案選擇器後，呼叫 savePicker.pickSaveFileAsync 讓使用者儲存檔案。

使用者指定檔案名稱、類型、位置並確認要儲存檔案之後，pickSaveFileAsync 會傳回一個代表該已儲存檔案的 storageFile 物件。您可以使用 then 或 done 擷取和處理這個檔案。

檔案選擇器範例會示範如何顯示檔案選擇器讓使用者儲存檔案。

savePicker.pickSaveFileAsync().then(function (file) {
    if (file) {
        // Prevent updates to the remote version of the file until we finish making changes and call CompleteUpdatesAsync.
        Windows.Storage.CachedFileManager.deferUpdates(file);
        // write to file
        Windows.Storage.FileIO.writeTextAsync(file, file.name).done(function () {
            // Let Windows know that we're finished changing the file so the other app can update the remote version of the file.
            // Completing updates may require Windows to ask for user input.
            Windows.Storage.CachedFileManager.completeUpdatesAsync(file).done(function (updateStatus) {
                if (updateStatus === Windows.Storage.Provider.FileUpdateStatus.complete) {
                    WinJS.log && WinJS.log("File " + file.name + " was saved.", "sample", "status");
                } else {
                    WinJS.log && WinJS.log("File " + file.name + " couldn't be saved.", "sample", "status");
                }
            });
        });
    } else {
        WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
    }
});

檔案儲存之後，應用程式即擁有該檔案的讀取權和寫入權。範例會擷取 file 參數中的已儲存檔案並檢查該檔案是否有效，但是範例不會進一步處理檔案。您可以在快速入門：讀取和寫入檔案中了解如何寫入和讀取結果檔案。

秘訣您應該永遠檢查儲存的檔案 (範例中的 file)，先確定檔案是有效的，才繼續執行任何其他處理。然後，您可以按照您應用程式適用的方式將內容儲存到檔案，並在檔案為無效時提供適當的行為。

備註

如果您使用和這裡類似的程式碼，您的應用程式應該會顯示檔案選擇器給使用者，讓使用者為要儲存的檔案指定名稱、類型以及位置。您可以在快速入門：讀取和寫入檔案中了解如何寫入和讀取結果檔案。

如果您想要將「另存新檔」命令新增到應用程式，請將呼叫 fileSavePicker 的控制項新增到應用程式 UI 上。若要了解如何新增控制項，請參閱新增控制項和內容。

如果您想要應用程式透過檔案選擇器為使用者提供儲存位置，請參閱快速入門：與檔案選擇器協定整合。

如何透過檔案選擇器儲存檔案 (HTML)

先決條件

指示

步驟 1: 建立和自訂檔案選擇器，顯示使用者可以儲存的位置

步驟 2: 顯示 fileSavePicker 以儲存檔案

備註

完整範例

相關主題

其他資源