Эта статья является 19-м днем в серии под названием « 31 день Windows 8» . Каждая из статей этой серии будет опубликована 
как для HTML5 / JS, так и для XAML / C # . Вы можете найти дополнительные ресурсы, загрузки и исходный код на нашем сайте .
Сегодня мы рассмотрим еще один бесценный инструмент в разработке для Windows 8 — File Picker. Существуют миллионы способов использования средства выбора файлов, но когда вы его упустите, вам нужно будет что-то получить с компьютера пользователя. Эта статья покажет вам, как это сделать.
Начало: package.appxmanifest
Как и во всех различных механизмах, которые мы использовали для взаимодействия с системой пользователя, нам нужно начать с обновления нашего файла package.appxmanifest. Поскольку в этой статье мы собираемся открывать и сохранять файлы, нам нужно добавить обе эти декларации в наш файл.
Для средства выбора файлов вы начнете с формы, которая выглядит следующим образом:
Вы должны сделать один из двух вариантов:
- Поддерживает любой тип файла. Установив этот флажок, вы заявляете, что можете получить доступ к любому типу файлов из вашего приложения.
- Поддерживаемый тип файла . Вы также можете указать, какие типы файлов вы хотите открыть, поэтому, если ваше приложение открывает только файлы Excel, например, вы можете указать «.xls» в качестве типа вашего файла.
Для этой демонстрации вы можете просто выбрать «Поддерживает любой тип файла». Я хочу сделать это, чтобы вы могли видеть все файлы в вашей системе независимо. Тот же процесс можно выполнить для средства выбора сохранения файла, которое предлагает вам такие же варианты, например:
Получение файла с компьютера вашего пользователя
В этой статье будет создано все более сложное приложение для выбора файлов с компьютера пользователя. Мы начнем получать только один файл, затем несколько файлов, а затем несколько файлов только определенного типа (.png). Большая часть кода для каждого примера идентична, поэтому мы сосредоточимся на том, что такое «новый» код на каждом шаге.
Для выбора одного файла на жестком диске пользователя мы начнем с объекта FileOpenPicker . Это объект, который откроет диалоговое окно выбора файлов для пользователя, поможет ему выбрать один или несколько файлов и вернуть их нам. У него много вариантов, и мы проработаем их все. Для выбора одного файла любого типа код запускается довольно просто:
var _pickers = Windows.Storage.Pickers,
openPicker = new _pickers.FileOpenPicker();
openPicker.fileTypeFilter.append(".png");
openPicker.suggestedStartLocation = _pickers.PickerLocationId.picturesLibrary
openPicker.pickSingleFileAsync().then(function (file) {
//do something awesome here
});
Вы заметите, что мы должны установить fileTypeFilter при создании FileOpenPicker . Вам не разрешено предоставлять подстановочный знак или просто игнорировать фильтр. Вы должны предоставить хотя бы один, но вы также можете предоставить несколько, что означает, что вы можете перечислить 8-10 распространенных типов файлов (особенно когда вы ищете изображения на устройстве пользователя, потому что это могут быть PNG, JPG, JPEG, GIF, BMP и т. Д.) Для этого вместо добавления только одного fileType мы можем просто заменить все из них следующим образом:
openPicker.fileTypeFilter.replaceAll([".png", ".jpg"])
Когда вы запустите это, ваш пользователь увидит интерфейс, который выглядит так:
Это интерфейс File Picker, и как только пользователь выберет файл, он будет возвращен вашему приложению как StorageFile , с которым мы работали в нескольких предыдущих статьях этой серии.
Далее, у нас может быть хорошее представление о том, где пользователь должен начать искать файлы, которые он хотел бы открыть в вашем приложении. Может быть, это их коллекция фотографий или музыка. Мы можем указать одно из 8 мест на их компьютере:
Итак, чтобы файл File Picker открылся в одном из этих мест, вам нужно добавить одну строку кода в ваш метод, чтобы он выглядел так:
openPicker.suggestedStartLocation = _pickers.PickerLocationId.picturesLibrary;
На этот раз средство выбора файлов запустится прямо в указанное вами место (в моем примере это библиотека изображений):
Последний параметр, которым мы можем управлять, относится к тому, как средство выбора файлов будет отображать файлы. Просто используйте свойство ViewMode объекта FileOpenPicker, например так:
openPicker.viewMode = _pickers.PickerViewMode.list;
Ваши параметры ограничены списком или миниатюрой, но выглядят они совершенно иначе. Эскиз ТОЛЬКО показывает квадратное изображение, представляющее файл. Список также показывает значок, но также показывает некоторые метаданные для файлов. Вот взгляд на одну и ту же папку с каждым видом (нажмите, чтобы увеличить):
Список
Thumbnail
Получение нескольких файлов с компьютера вашего пользователя
Иногда мы хотим получить более одного файла за раз. В этом случае мы можем использовать другой вызов метода для нашего объекта FileOpenPicker . На этот раз мы будем использовать метод pickMultipleFilesAsync () .
var _pickers = Windows.Storage.Pickers,
openPicker = new _pickers.FileOpenPicker();
openPicker.fileTypeFilter.replaceAll([".png", ".jpg"])
openPicker.pickMultipleFilesAsync().then(function (file) {
//do something awesome here
});
Так что, более или менее, разница между выбором одного или нескольких файлов с точки зрения кода очень мала. Мы получаем коллекцию объектов StorageFile, а не один, но этого следует ожидать, когда мы разрешаем выбирать несколько файлов.
Что отличается, по крайней мере от того, что я могу сказать, это то, КАК пользователь может выбрать несколько файлов.
Как вы можете видеть на изображении выше (нажмите, чтобы увеличить), мы можем не только выбрать несколько файлов, но и увидеть, что в нижней части интерфейса File Picker есть «корзина». Это показывает список файлов, которые выбрал пользователь. Однако он также позволяет пользователю выбирать сразу несколько файлов из совершенно разных папок. Ваши пользователи смогут выбрать несколько файлов из одной папки и несколько файлов из другой, и все они будут предоставлены вашему приложению сразу, без необходимости совершать несколько поездок в эти папки. Это абсолютно потрясающая функция, которую нельзя упускать из виду.
В нашем последнем разделе этой статьи давайте посмотрим, как мы можем использовать средство выбора файлов для сохранения файлов на компьютере пользователя.
Сохранение файла на жестком диске вашего пользователя
Одной из связанных операций, которую мы можем захотеть использовать, является сохранение файла на компьютере вашего пользователя. Это отличается от того, о чем мы говорили в 8-й день этой серии, где мы сохраняли файлы внутри нашего приложения . В этом случае мы сохраняем постоянный файл, который будет продолжать жить на компьютере пользователя, даже если наше приложение будет удалено. Если ваши файлы непригодны для других приложений, скорее всего, это НЕ тот способ, которым вы хотели бы хранить свои файлы. Обычно я рекомендую сохранять такие файлы для типов файлов, которые могут открываться различными приложениями. Для этого он очень похож на наш FileOpenPicker , но теперь это FileSavePicker .
Другое отличие в этой ситуации заключается в том, что мы записываем данные на жесткий диск пользователя. Это означает, что у нас есть все другие неприятности, которые идут с ним. Файлы уже могут быть открыты, они могут быть отредактированы другими приложениями или даже удалены, когда мы работаем с ними. Поэтому мы сначала запустим средство выбора сохранения файла, чтобы определить, где пользователь хочет сохранить свой файл (а также какой тип файла и имя он хочет ему дать. Это выглядит так:
А вот как выглядит код, чтобы весь этот процесс произошел:
var savePicker = new _pickers.FileSavePicker(),
_pickers = Windows.Storage.Pickers;
var savePicker = new _pickers.FileSavePicker();
savePicker.fileTypeChoices.insert("Plain Text", [".txt"]);
savePicker.fileTypeChoices.insert("31 Days", [".31"]);
savePicker.fileTypeChoices.insert("Excel", [".xlsx"]);
savePicker.suggestedFileName = "31DaysOfWindows8";
savePicker.suggestedStartLocation = _pickers.PickerLocationId.picturesLibrary;
savePicker.pickSaveFileAsync().then(function (file) {
//yea do awesome here
})
В этом случае вы можете видеть, что начало нашего примера кода не выглядит по-другому. Вместо фильтров мы можем добавить FileTypeChoices, которые функционируют как различные форматы, которые наш пользователь может захотеть сохранить в своем файле. Выборы, которые я включил, на самом деле не имеют большого смысла, но помогают проиллюстрировать, что вы можете указать любые типы файлов (или типы) в этом списке. Я также добавил предлагаемое FileName, чтобы помочь пользователю понять, как, по нашему мнению, должен вызываться файл. Это все под вашим полным контролем.
Кроме того, как только пользователь выбрал местоположение и имя для своего файла, мы еще не закончили. Если они действительно вернули эти значения для использования, наш следующий шаг — фактически записать файл на сам диск. Давайте углубимся в обещание и посмотрим, как бы мы его спасли.
var _pickers = Windows.Storage.Pickers,
_fileManager = Windows.Storage.CachedFileManager,
_fileIO = Windows.Storage.FileIO,
_updateStatus = Windows.Storage.Provider.FileUpdateStatus;
savePicker.pickSaveFileAsync().then(function (file) {
if (file) {
_fileManager.deferUpdates(file);
_fileIO.writeTextAsync(file, "file contents").done(function () {
_fileManager.completeUpdatesAsync(file).done(function (updateStatus) {
if (updateStatus === _updateStatus.complete) {
//saved
} else {
//opps
}
});
});
} else {
//user cancelled
}
});
Внутри нашего оператора if мы сначала проверяем, действительно ли мы получили файл. Затем мы используем метод deferUpdates (), чтобы предотвратить любые дополнительные изменения в файле, с которым мы работаем. Они будут «отложены» до завершения нашей операции. Далее пишем содержимое нашего файла. Наконец, мы фиксируем эти изменения с помощью метода completeUpdatesAsync (). Это где вся работа фактически завершена.
Вы обнаружите, что если файл уже существует, вам также будет предложено «Заменить существующий файл?» диалоговое окно.
В конечном счете, это все, что нужно для сохранения простого файла в системе пользователя. Для более сложных операций и типов файлов вы захотите изучить класс FileIO. Вы можете прочитать больше об этом на MSDN .
Выбор папки на компьютере пользователя
Последняя тема, которую я хочу затронуть в этой статье, также очень связана с остальными: выбор папки с компьютера пользователя вместо определенного файла. Это отлично подходит для того, чтобы позволить пользователю выбрать место сохранения по умолчанию для будущего или, возможно, место для поиска файлов в будущем. Что хорошего в этом процессе, так это то, что, как только пользователь выбрал папку, мы можем сохранить ее как нашу папку по умолчанию, и нам предоставлены явные права на чтение и запись в / из этой папки в будущем без необходимости запрашивать доступ в будущем. Вот как мы это делаем.
var _pickers = Windows.Storage.Pickers,
_fileManager = Windows.Storage.CachedFileManager,
_fileIO = Windows.Storage.FileIO,
_updateStatus = Windows.Storage.Provider.FileUpdateStatus;
var folderPicker = new _pickers.FolderPicker(),
accessCache = Windows.Storage.AccessCache;
folderPicker.fileTypeFilter.replaceAll([".txt", ".31"]);
folderPicker.pickSingleFolderAsync().then(function (folder) {
if (folder) {
accessCache.StorageApplicationPermissions.futureAccessList.addOrReplace
("PickedFolderToken", folder);
}
});
Как видите, весь этот код выглядит очень знакомым. Однако, если мы подтвердим, что нам была возвращена фактическая папка, мы можем сохранить ее в StorageApplicationPermissions.futureAccessList как место, где нам было предоставлено разрешение на использование. Сохранение его таким образом и обращение к нему в будущем ограничит количество раз, когда вы будете запрашивать разрешение у пользователя на сохранение файла в его системе.
Резюме
Сегодня мы рассмотрели несколько различных способов помочь нашим пользователям взаимодействовать с файлами, которые находятся на их компьютере. Мы увидели, как открывать один и несколько файлов, сохранять файлы обратно на жесткий диск и даже выбирать места сохранения по умолчанию для будущего использования. Скорее всего, вы снова и снова будете использовать эти методы в своих приложениях, так что это важный урок для изучения.
Если вы хотите загрузить пример кода, который обсуждался в этой статье, щелкните значок ниже:
Завтра мы рассмотрим еще одну распространенную функцию: печать. Мы рассмотрим, как общаться с принтерами пользователя, а также как мы регистрируемся в системе, чтобы сделать печать еще проще. Увидимся позже!
