Guida introduttiva: Recupero di un file immagine da un dispositivo di archiviazione (HTML)
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
In questa esercitazione viene descritto come recuperare un file immagine da un dispositivo di archiviazione rimovibile e visualizzarla.
Obiettivo: Come nell'esempio precedente, dovrai enumerare i dispositivi di archiviazione portatili e creare un'istanza di uno di essi usando Windows.Devices.Portable.Storage.FromId, ma in questo esempio userai createFileQueryWithOption per trovare un file immagine e getFilesAsync per recuperarlo.
Prerequisiti
È necessaria una conoscenza di JavaScript e HTML.
Devi avere a disposizione un dispositivo di archiviazione rimovibile.
Tempo per il completamento: 20 minuti.
Istruzioni
1. Aprire Microsoft Visual Studio
Apri un'istanza di Visual Studio.
2. Creare un nuovo progetto
Nella finestra di dialogo Nuovo progetto scegli un'applicazione vuota dai tipi di progetto JavaScript.
3. Dichiarare la funzionalità Archivi rimovibili
Fai doppio clic su package.appxmanifest in Esplora soluzioni. Fai clic sulla scheda Funzionalità. Seleziona Archivi rimovibili nell'elenco Funzionalità.
4. Dichiarare i tipi di file
- Nella scheda Dichiarazioni scegli Dichiarazioni tipi file da Dichiarazioni disponibili.
- In Proprietà imposta la proprietà Name su image.
- Nella casella Tipi file supportati fai clic su Aggiungi nuovo, per aggiungere l'estensione gif come tipo di file supportato immettendo .gif nel campo Tipo di file.
- Aggiungi altri due tipi di file supportati per le estensioni jpg e png facendo clic su Aggiungi nuovo e quindi compilando il campo FileType.
5. Inserire il codice HTML e JavaScript dell'applicazione
Apri il file Default.html e copia al suo interno il codice seguente, sostituendo il contenuto originale.
<!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. Testare l'applicazione
- Collega il dispositivo di archiviazione rimovibile, se non lo hai ancora fatto.
- Scegli Avvia debug dal menu Debug per testare la soluzione.
- Fai clic sul pulsante Recupera file immagine per recuperare il primo file immagine nel dispositivo di archiviazione rimovibile e visualizzarlo nell'elemento Image.
Nota Se ricevi un errore, procedi come segue:
- Verifica di avere abilitato l'accesso all'archivio rimovibile aprendo package.appxmanifest in Esplora soluzioni e controllando che l'opzione Archivio rimovibile nella scheda Funzionalità sia selezionata.
Riepilogo e passaggi successivi
In questo esempio hai eseguito l'accesso a un'immagine da un dispositivo di archiviazione dopo aver creato l'oggetto Storage ottenendo un ID dispositivo da findAllAsync e passandolo a Windows.Devices.Portable.Storage.FromId
Nella funzione successHandler questo esempio ha scelto il primo di tutti i dispositivi di archiviazione enumerati, ma puoi modificare l'app affinché presenti l'elenco di tutti gli archivi rimovibili da cui gli utenti possono scegliere quello desiderato.
Nell'esercitazione successiva, procederai alla creazione dell'oggetto Storage usando un gestore AutoPlay.