Come salvare file tramite selezioni file (HTML)

Articolo
12/11/2015

[ 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 ]

Usa fileSavePicker per consentire agli utenti di specificare il nome e il percorso in cui salvare il contenuto della tua app.

Prerequisiti

Conoscere le tecniche di programmazione asincrona per le app di Windows Runtime scritte in JavaScript

Per informazioni su come scrivere app asincrone, vedi Guida introduttiva: Uso delle promesse in JavaScript.

Istruzioni

Passaggio 1: Creare e personalizzare la selezione file per visualizzare i percorsi in cui gli utenti possono effettuare il salvataggio

Usa fileSavePicker in modo che gli utenti possano specificare il nome, il tipo di file e il percorso di un file da salvare. Puoi personalizzare la selezione file impostando le proprietà nell'oggetto fileSavePicker creato.

L'esempio di selezione file illustra come creare e personalizzare un oggetto 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";

Dovresti impostare le proprietà fileSavePicker pertinenti per i tuoi utenti e per la tua app. Per indicazioni su come personalizzare la selezione file, vedi Linee guida ed elenco di controllo per la selezione file.

L'esempio di selezione file personalizza la selezione file impostando tre proprietà di fileSavePicker: suggestedStartLocation, fileTypeChoices e suggestedFileName.

Nota Gli oggetti fileSavePicker usano pickerViewMode.list per visualizzare i dati.

JJ150595.wedge(it-it,WIN.10).gif Personalizzazione di un oggetto fileSavePicker in dettaglio

Dato che il nostro utente salva un documento o un file di testo, l'esempio imposta savePicker.suggestedStartLocation sulla cartella locale dell'app tramite LocalFolder.
```
savePicker.suggestedStartLocation = Windows.Storage.ApplicationData.localFolder;
```
Devi impostare suggestedStartLocation sul percorso del file system più idoneo per il tipo di file che verrà selezionato. Se l'utente deve selezionare musica, immagini o video, imposta il percorso iniziale rispettivamente su Musica, Immagini o Video. Per tutti gli altri tipi di file, imposta il percorso iniziale sulla cartella locale dell'app. Si tratta semplicemente di un percorso iniziale: gli utenti possono spostarsi in altri percorsi usando la selezione file.
Dato che vogliamo essere certi che la nostra app possa aprire il file dopo averlo salvato, l'esempio usa savePicker.fileTypeChoices.insert per specificare i tipi di file supportati dall'esempio (documenti di Microsoft Word e file di testo).
```
savePicker.fileTypeChoices.insert("Plain Text", [".txt"]);
```
Assicurati che tutti i tipi di file specificati siano supportati dalla tua app.

Gli utenti saranno in grado di salvare i file in uno dei tipi specificati in questo elenco. Potranno anche cambiare il tipo di file selezionandone uno diverso (tra quelli da te specificati) nel controllo a discesa in basso a destra della selezione file. La prima opzione del tipo di file nell'elenco sarà selezionata per impostazione predefinita. Per cambiare il tipo di file predefinito, imposta la proprietà savePicker.defaultFileExtension.

Nota La selezione file usa il tipo di file attualmente selezionato anche per filtrare i file visualizzati in modo che l'utente veda solo i tipi corrispondenti ai tipi di file selezionati.
Poiché vogliamo ridurre la necessità di digitazione da parte dell'utente, l'esempio imposta un oggetto savePicker.suggestedFileName per il file da salvare.
```
savePicker.suggestedFileName = "New Document";
```
Prova a rendere il nome di file suggerito il più attinente possibile al file salvato dall'utente. Ad esempio, come Word, è possibile suggerire il nome di file esistente se ce n'è uno oppure la prima riga di un documento se l'utente salva un file ancora privo di nome.

Passaggio 2: Visualizzare la selezione file per salvare un file

Dopo aver creato e personalizzato la selezione file, consenti all'utente di salvare un file chiamando savePicker.pickSaveFileAsync.

Dopo che l'utente ha specificato il nome, il tipo e il percorso del file e ne conferma il salvataggio, pickSaveFileAsync restituisce un oggetto storageFile che rappresenta il file salvato. Puoi acquisire ed elaborare questo file usando then o done.

L'esempio di selezione file dimostra come visualizzare la selezione file per consentire all'utente di salvare un file.

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");
    }
});

Dopo aver salvato il file, l'app dispone di accesso in lettura e scrittura al file in questione. L'esempio acquisisce il file salvato nel parametro file e verifica che il file sia valido, tuttavia l'esempio non prevede ulteriori elaborazione del file. Per ulteriori informazioni su come scrivere e leggere il file risultante, vedi Guida introduttiva: Lettura e scrittura di un file.

Suggerimento Ti consigliamo di controllare sempre il file salvato (file nell'esempio) per verificare che sia valido prima di eseguire qualsiasi altra operazione. Potrai quindi salvare il contenuto nel file in base alle esigenze della tua app e specificare il comportamento appropriato qualora il file selezionato non fosse valido.

Osservazioni

Se usi codice simile a quello illustrato qui, la tua app dovrebbe visualizzare una selezione file e consentire agli utenti di specificare il nome, il tipo e il percorso del file da salvare. Per ulteriori informazioni su come scrivere e leggere il file risultante, vedi Guida introduttiva: Lettura e scrittura di un file.

Per aggiungere il salvataggio con nome all'app, aggiungi un controllo all'interfaccia utente dell'app che chiami fileSavePicker. Per informazioni sull'aggiunta di controlli, vedi Aggiunta di controlli e contenuto.

Se vuoi che la tua app fornisca un percorso di salvataggio agli utenti tramite selezione file, vedi Guida introduttiva: Integrazione con i contratti di selezione file.