Как сохранить файлы с помощью средств выбора файлов (HTML)

Статья
12/12/2015

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

Чтобы позволить пользователям задавать имя и расположение для сохранения содержимого вашего приложения, воспользуйтесь средством fileSavePicker.

Необходимые условия

Понятие асинхронного программирования для приложений среды выполнения Windows на JavaScript

Сведения о создании асинхронных приложений см. в статье Краткое руководство: использование условий в языке JavaScript.

Инструкции

Этап 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, актуальные для ваших пользователей и приложения. Указания по выбору настроек средства выбора файлов см. в разделе с рекомендациями и контрольным списком для средств выбора файлов.

В примере File picker средство выбора файлов настраивается с помощью установки трех свойств fileSavePicker: suggestedStartLocation, fileTypeChoices и suggestedFileName.

Примечание Объекты fileSavePicker используют pickerViewMode.list для отображения данных.

JJ150595.wedge(ru-ru,WIN.10).gif Настройка fileSavePicker в подробностях

Поскольку пользователь сохраняет документ или текстовый файл, в примере локальной папке приложения присваивается savePicker.suggestedStartLocation с помощью LocalFolder.
```
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. Подробнее о добавлении элементов управления см. в статье Добавление элементов управления и содержимого.

Если хотите, чтобы ваше приложение позволяло пользователям выбрать расположение для сохранения с помощью средства выбора файлов, см. Краткое руководство: интеграция с контрактами средства выбора файлов.