Краткое руководство: получение файла изображения с запоминающего устройства (HTML)
[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]
Это руководство покажет вам, как получить файл изображения со съемного носителя и отобразить его.
Цель: Как и в предыдущем примере, мы составим перечень переносных запоминающих устройств и создадим экземпляр с помощью Windows.Devices.Portable.Storage.FromId, но в этом примере мы используем createFileQueryWithOption, чтобы найти файл изображения, и getFilesAsync, чтобы получить его.
Необходимые условия
Вы должны уметь работать с JavaScript и HTML.
Вам понадобится съемное запоминающее устройство.
Время для завершения: 20 мин.
Инструкции
1. Открытие Microsoft Visual Studio
Запустите экземпляр программы Visual Studio.
2. Создание нового проекта
В диалоговом окне Создать проект выберите среди типов проектов JavaScript пустое приложение.
3. Объявление возможности "Съемные носители"
Дважды щелкните package.appxmanifest в обозревателе решений. Перейдите на вкладку Возможности. Выберите Съемные носители в списке Возможности.
4. Объявление типов файлов
- На вкладке "Объявления" выберите Объявления типов файлов из списка Доступные объявления.
- В разделе Свойства установите для свойства имени значение image.
- В окне "Поддерживаемые типы файлов" щелкните Добавить, чтобы добавить GIF к поддерживаемым типам файлов, введя .gif в поле типа файла.
- Добавьте еще два поддерживаемых типа файлов (JPG и PNG), щелкнув Добавить и заполнив поле типа файла.
5. Добавление HTML и JavaScript в приложение
Откройте файл Default.html и скопируйте в него следующий код, заменяя исходное содержимое.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Get an image file from a removable storage device</title>
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script type = "text/javascript" >
Enum = Windows.Devices.Enumeration;
// Enumerate removable storage devices.
// The success callback selects the removable storage to use.
function pickStorageToGetImageFrom() {
Enum.DeviceInformation.findAllAsync(
Windows.Devices.Portable.StorageDevice.getDeviceSelector(),
null).then(
successCallback,
errorCallback);
}
// Handler that's called when removable storages are found.
// storageDevices: A collection of type
// Windows.Devices.Enumeration.DeviceInformationCollection.
// This example just takes the first storage found in the list.
function successCallback(storageDevices) {
var removableStorage = null;
if (storageDevices.length) {
try {
// Create an IStorageItem from the first removable storage device
removableStorage = Windows.Devices.Portable.StorageDevice.fromId(
storageDevices.getAt(0).id);
// document.getElementById("output").innerHTML = storageDevices.getAt(0).name;
} catch (e) {
document.getElementById("output").innerHTML =
"Error: " + e.message;
}
if (removableStorage != null) {
getImageFiles(removableStorage);
}
} else {
document.getElementById("output").innerHTML =
"No removable storage devices were found.";
}
}
// Error callback that's called if unable to enumerate all
// removable storages
function errorCallback(e) {
document.getElementById("output").innerHTML =
"Error enumerating storages: " + e.message;
}
// Find the images on the removable storage and display the first one
// in the <img> element.
// storageItem: the item representing the removable storage
function getImageFiles(removableStorage)
{
// Construct the query for image files
var queryOptions = new Windows.Storage.Search.QueryOptions(
Windows.Storage.Search.CommonFileQuery.orderByName,
[".jpg", ".png", ".gif"]);
var imageFileQuery = removableStorage.createFileQueryWithOptions(
queryOptions);
// Run the query for image files
imageFileQuery.getFilesAsync().
then(
function (items) {
displayFirstImage(items);
},
function (e) {
document.getElementById("output").innerHTML =
"Error when looking for images on the removable storage: "
+ e.message;
});
}
function displayFirstImage(items) {
var found = false;
for (var i = 0, l = items.length; i < l && !found; i++) {
if (items[i].size > 0) { // display the first non-empty file
displayImage(items[i]);
found = true;
}
}
if (!found) {
// No files found matching our criteria
document.getElementById("output").innerHTML =
"No image files found on the removable storage.";
}
}
function displayImage(imageFile) {
document.getElementById("imageNameHolder").innerHTML =
"Image file name: " + imageFile.name + "<br/>";
// Setting 2nd parameter to 'false' cleans up the URL
// after first use. we set this because we only need
// to load the URL into the image tag once.
document.getElementById("imageHolder").src =
window.URL.createObjectURL(imageFile, false);
}
</script>
</head>
<body>
<div>
<p>Finds and displays the first available image file
(.jpg, .png, or .gif) on a removable storage device.</p>
<button onclick="pickStorageToGetImageFrom()">Get Image File</button>
</div>
<div id="output"></div>
<div id="imageOutput">
<img id="imageHolder" alt="image holder" src=""/><br />
<div id="imageNameHolder"></div>
</div>
</body>
</html>
6. Проверка приложения
- Подключите съемное ЗУ, если оно еще не подключено.
- Чтобы проверить решение, в меню Отладка щелкните Начать отладку.
- Нажмите кнопку Get Image File, чтобы получить первый файл изображения на съемном ЗУ и отобразить его в элементе изображения.
Примечание Если вы получили ошибку, проверьте следующее.
- Убедитесь, что вы разрешили доступ к съемным носителям: откройте файл package.appxmanifest в обозревателе решений и проверьте состояние возможности Съемные носители на вкладке Возможности.
Краткая сводка и дальнейшие действия
В этом примере мы получили доступ к изображению на съемном носителе, после того как создали объект хранения, получив идентификатор устройства от findAllAsync и передав его Windows.Devices.Portable.Storage.FromId.
В функции successHandler этот пример выбрал первый из всех перечисленных запоминающих устройств, но вы можете изменить приложение таким образом, чтобы отображался список всех доступных съемных носителей, из которого пользователь сможет выбрать нужный.
В следующем руководстве мы создадим объект хранения с помощью обработчика автозапуска.