파일 선택기를 통해 파일을 저장하는 방법(HTML)

아티클
12/11/2015

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

사용자가 앱의 콘텐츠를 저장할 이름과 위치를 지정할 수 있도록 하려면 fileSavePicker를 사용합니다.

사전 요구 사항

JavaScript로 작성한 Windows 런타임 앱의 비동기 프로그래밍 이해

비동기 앱 작성 방법에 대한 자세한 내용은 빠른 시작: JavaScript에서 promise 사용을 참조하세요.

지침

단계 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 속성을 설정해야 합니다. 파일 선택기 사용자 지정 방법을 결정하는 데 도움이 되는 지침은 파일 선택기에 대한 지침 및 검사 목록을 참조하세요.

파일 선택기 샘플에서는 세 가지 fileSavePicker 속성(suggestedStartLocation, fileTypeChoices 및 suggestedFileName 속성)을 설정하여 파일 선택기를 사용자 지정합니다.

참고 fileSavePicker 개체에서는 pickerViewMode.list를 사용하여 데이터를 표시합니다.

JJ150595.wedge(ko-kr,WIN.10).gif FileSavePicker를 자세히 지정

사용자가 문서나 텍스트 파일을 저장하고 있으므로 이 샘플에서는 LocalFolder를 사용하여 savePicker.suggestedStartLocation를 앱의 로컬 폴더로 설정합니다.
```
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)을 검사하여 유효한지 확인해야 합니다. 그런 다음 파일을 앱에 맞게 저장하고 선택한 파일이 잘못된 경우 적절한 동작을 제공할 수 있습니다.

설명

여기에 나온 것과 유사한 코드를 사용하는 경우 앱에서는 파일 선택기를 표시하여 사용자가 저장할 파일의 이름, 파일 형식 및 위치를 지정할 수 있게 됩니다. 결과 파일을 읽고 쓰는 방법에 대한 자세한 내용은 빠른 시작: 파일 읽기 및 쓰기를 참조하세요.

앱에 "다른 이름으로 저장"을 추가하려면 앱 UI에 fileSavePicker를 호출하는 컨트롤을 추가합니다. 컨트롤 추가에 대한 자세한 내용은 컨트롤 및 내용 추가를 참조하세요.

앱에서 파일 선택기를 통해 사용자에게 저장 위치를 제공하려면 빠른 시작: 파일 선택기 계약과 통합을 참조하세요.

파일 선택기를 통해 파일을 저장하는 방법(HTML)

사전 요구 사항

지침

단계 1: 파일 선택기를 만들고 사용자가 저장할 수 있는 위치를 표시하도록 사용자 지정

단계 2: 파일을 저장하는 fileSavePicker 표시

설명

전체 예제

관련 항목

추가 리소스