빠른 시작: 파일 선택기를 사용하여 파일에 액세스(HTML)

아티클
12/11/2015

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

파일 선택기를 통해 사용자가 파일 및 폴더를 선택할 수 있도록 하여 파일 및 폴더에 액세스합니다. fileOpenPicker 클래스를 사용하여 파일에 액세스하고 folderPicker 클래스를 사용하여 폴더에 액세스할 수 있습니다.

사전 요구 사항

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

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

파일 선택기 UI

파일 선택기에서 화면의 위쪽과 아래쪽에는 사용자의 위치를 알려 주는 정보를 표시하고 사용자가 파일을 액세스하거나 저장할 때 일관된 환경을 제공하는 영역이 있습니다.

표시되는 정보는 다음과 같습니다.

현재 위치(왼쪽 위에 있음)
사용자가 선택한 항목 바구니(아래에 있음)
사용자가 찾아볼 수 있는 위치의 드롭다운 목록(왼쪽 위의 아래쪽 캐럿에서 선택할 수 있음)

예를 들어 다음 스크린샷은 사용자가 파일을 선택할 수 있도록 호출된 파일 선택기를 보여 줍니다. 이 스크린샷에서 사용자는 파일 두 개를 선택했습니다. 두 개의 파일을 열기 위해 선택한 파일 선택기의 화면 캡처입니다.

사용자는 파일 선택기 왼쪽 위에 있는 아래쪽 캐럿을 선택하여 오른쪽의 스크린샷에 나온 목록과 같이 사용 가능한 위치의 드롭다운 목록을 볼 수 있습니다. 이러한 위치에는 음악 또는 다운로드 폴더와 같은 파일 시스템 위치가 포함됩니다. 또한 다른 앱(예제: Microsoft OneDrive)이 파일 선택기 계약에 참여한 경우 스크린샷 목록 아래쪽에 표시되는 이러한 다른 앱도 포함됩니다.

왼쪽 위에 드롭다운 위치 목록을 표시하는 파일 선택기의 잘려진 화면 캡처입니다.

한 파일을 선택하는 전체 코드

파일 선택기 샘플에서는 fileOpenPicker를 사용하여 사용자가 단일 파일을 선택하도록 하는 방법에 대해 설명합니다.

// Create the picker object and set options
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
// Users expect to have a filtered view of their folders depending on the scenario.
// For example, when choosing a documents folder, restrict the filetypes to documents for your application.
openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);

// Open the picker for the user to pick a file
openPicker.pickSingleFileAsync().then(function (file) {
    if (file) {
        // Application now has read/write access to the picked file
        WinJS.log && WinJS.log("Picked photo: " + file.name, "sample", "status");
    } else {
        // The picker was dismissed with no selected file
        WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
    }
});

여러 파일을 선택하는 전체 코드는 파일 선택기 샘플을 참조하세요.

한 파일 선택 연습

파일 선택기를 호출하려면 파일 선택기 개체 만들기 및 사용자 지정, 사용자가 항목을 선택할 수 있도록 파일 선택기 표시의 두 가지 기본 작업을 수행해야 합니다.

fileOpenPicker 만들기 및 사용자 지정

사용자가 하나 이상의 파일을 선택할 경우 fileOpenPicker를 사용합니다. 만든 개체에서 속성을 설정하여 이 클래스를 사용자 지정할 수 있습니다.

파일 선택기 샘플에서는 fileOpenPicker 개체를 만들고 사용자 지정하는 방법에 대해 설명합니다.
```
// Create the picker object and set options
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
// Users expect to have a filtered view of their folders depending on the scenario.
// For example, when choosing a documents folder, restrict the filetypes to documents for your application.
openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);
```
사용자 및 앱과 관련된 파일 선택기 개체에서 속성을 설정해야 합니다. 파일 선택기 사용자 지정 방법을 결정하는 데 도움이 되는 지침은 파일 선택기에 대한 지침 및 검사 목록을 참조하세요. 파일 선택기 샘플에서 파일 선택기를 사용자 지정하기 위해 특정 속성을 설정하는 이유에 대한 설명을 보려면 계속 읽어 보세요.

파일 선택기 샘플 fileOpenPicker 사용자 지정(설명)

파일 선택기 샘플에서는 세 가지 fileOpenPicker 속성(viewMode, suggestedStartLocation 및 fileTypeFilter 속성)을 설정하여 사용자가 선택할 수 있는 편리한 위치에 사진의 풍부한 시각적 표시를 만듭니다.
- openPicker.viewMode를 thumbnail PickerViewMode 열거 값으로 설정하면 사진 미리 보기를 사용하여 파일 선택기에 파일을 표시함으로써 풍부한 시각적 표시가 만들어집니다.
```
openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
```
  파일 선택기를 사용하여 사진이나 비디오 같은 시각적 파일을 표시하려면 viewMode를 PickerViewMode.thumbnail로 설정해야 합니다. 그렇지 않으면 PickerViewMode.list를 사용합니다.
  
  경우에 따라 사용자는 사진이나 비디오 또는 다른 종류의 파일을 선택할 수 있습니다. 예를 들어 사용자는 메일에 첨부하거나 IM을 통해 보낼 파일을 선택할 수 있습니다. 이 경우 두 개의 UI 컨트롤을 앱에 추가하여 두 보기 모드를 모두 지원해야 합니다. 컨트롤 하나는 사용자가 사진 및 비디오를 선택할 수 있도록 thumbnail 보기 모드를 사용하여 파일 선택기를 호출해야 합니다. 다른 컨트롤은 사용자가 다른 종류의 파일을 선택할 수 있도록 list 보기 모드를 사용하여 파일 선택기를 호출해야 합니다. 예를 들어 메일 앱에는 사진 또는 비디오 첨부 및 문서 첨부라는 두 개의 단추가 있을 수 있습니다.
- PickerLocationId.picturesLibrary를 사용하여 openPicker.suggestedStartLocation을 사진으로 설정하면 사용자가 사진을 찾을 수 있을 것 같은 위치에서 시작할 수 있습니다.
```
openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
```
  suggestedStartLocation은 선택할 파일의 형식에 적합한 파일 시스템 위치로 설정해야 합니다. 사용자가 음악, 사진 또는 비디오를 선택할 경우 시작 위치를 각각 음악, 사진 또는 비디오로 설정합니다. 다른 모든 파일 형식의 경우 시작 위치를 문서로 설정합니다. 단지 시작 위치일 뿐입니다. 사용자는 파일 선택기를 사용하는 동안 다른 위치로 이동할 수 있습니다.
  
  또한 suggestedStartLocation이 항상 파일 선택기의 시작 위치로 사용되는 것은 아닙니다. 사용자에게 일관성을 제공하기 위해 파일 선택기는 사용자가 마지막으로 본 위치를 기억하며 일반적으로 해당 위치에서 시작합니다.
- openPicker.fileTypeFilter.replaceAll를 사용하여 사용자가 파일 선택기에서 볼 수 있는 파일 형식을 지정하면 사용자가 관련성이 있고 유용한 파일을 선택하는 데 집중하도록 할 수 있습니다.
```
openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);
```
  표시되는 파일이 계속 관련성을 유지하도록 하려면 파일 선택기에 표시할 파일 형식을 지정해야 합니다. 예를 들어 앱이 비디오 플레이어인 경우 fileTypeFilter 속성을 사용하면 비디오 파일 이름 확장명에 따라 파일 선택기에 표시되는 파일이 플레이어에서 지원하는 비디오 형식이 되도록 할 수 있습니다.
  
  항목을 대체하는 대신 파일 형식을 fileTypeFilter에 추가하려면 replaceAll 대신 append 메서드를 사용할 수 있습니다.
fileOpenPicker 표시

이제 사용자가 단일 파일이나 여러 파일을 선택하도록 파일 선택기를 표시할 수 있습니다.
- 사용자가 단일 파일을 선택하도록 표시
  
  파일 선택기를 만들어 사용자 지정한 후 fileOpenPicker.pickSingleFileAsync를 호출하여 사용자가 파일 하나를 선택하도록 할 수 있습니다. 사용자가 파일을 선택하면 fileOpenPicker.pickSingleFileAsync는 선택된 파일을 나타내는 storageFile 개체를 반환합니다.
  
  파일 선택기 샘플에서는 사용자가 파일 하나를 선택할 수 있는 파일 선택기를 표시하는 방법과 처리하기 위해 선택한 파일을 캡처하는 방법을 보여 줍니다.
```
// Open the picker for the user to pick a file
openPicker.pickSingleFileAsync().then(function (file) {
    if (file) {
        // Application now has read/write access to the picked file
        WinJS.log && WinJS.log("Picked photo: " + file.name, "sample", "status");
    } else {
        // The picker was dismissed with no selected file
        WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
    }
});
```
  openPicker.pickSingleFileAsync 호출이 완료되면 storageFile 개체가 나타내는 선택된 파일이 함수 리터럴에 전달되어 file 매개 변수로 처리됩니다. 작업을 취소하고 아무것도 선택하지 않으면 이 매개 변수는 null이 됩니다.
- 사용자가 여러 파일을 선택하도록 표시
  
  파일 선택기를 만들어 사용자 지정한 후 fileOpenPicker.pickMultipleFilesAsync를 호출하여 사용자가 파일을 여러 개 선택하도록 할 수 있습니다.
  
  사용자가 여러 파일을 선택하면 fileOpenPicker.pickMultipleFilesAsync는 선택된 파일을 나타내는 storageFile 개체 목록을 반환합니다.
  
  파일 선택기 샘플에서는 사용자가 여러 파일을 선택할 수 있는 파일 선택기를 표시하는 방법과 처리하기 위해 선택한 파일 목록을 캡처하는 방법을 보여 줍니다.
```
openPicker.pickMultipleFilesAsync().then(function (files) {
    if (files.size > 0) {
        // Application now has read/write access to the picked file(s)
        var outputString = "Picked files:\n";
        for (var i = 0; i < files.size; i++) {
            outputString = outputString + files[i].name + "\n";
        }
        WinJS.log && WinJS.log(outputString, "sample", "status");
    } else {
        // The picker was dismissed with no selected file
        WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
    }
});
```
  openPicker.pickMultipleFilesAsync 호출이 완료되면 선택된 파일의 목록이 함수 리터럴에 전달되어 files 매개 변수로 처리됩니다. 이 목록의 선택된 파일은 storageFile 개체로 표시됩니다. 작업을 취소하고 아무것도 선택하지 않으면 이 매개 변수는 0보다 큰 크기를 갖게 됩니다.

한 폴더를 선택하는 전체 코드

파일 선택기 샘플에서는 folderPicker를 사용하여 사용자가 단일 폴더를 선택하도록 하는 방법에 대해 설명합니다.

// Verify that we are currently not snapped, or that we can unsnap to open the picker
var currentState = Windows.UI.ViewManagement.ApplicationView.value;
if (currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped &&
    !Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {
    // Fail silently if we can't unsnap
    return;
}

// Create the picker object and set options
var folderPicker = new Windows.Storage.Pickers.FolderPicker;
folderPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.desktop;
// Users expect to have a filtered view of their folders depending on the scenario.
// For example, when choosing a documents folder, restrict the filetypes to documents for your application.
folderPicker.fileTypeFilter.replaceAll([".docx", ".xlsx", ".pptx"]);

folderPicker.pickSingleFolderAsync().then(function (folder) {
    if (folder) {
        // Application now has read/write access to all contents in the picked folder (including sub-folder contents)
        // Cache folder so the contents can be accessed at a later time
        Windows.Storage.AccessCache.StorageApplicationPermissions.futureAccessList.addOrReplace("PickedFolderToken", folder);
        WinJS.log && WinJS.log("Picked folder: " + folder.name, "sample", "status");
    } else {
        // The picker was dismissed with no selected file
        WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
    }
});

한 폴더 선택 연습

folderPicker 만들기 및 사용자 지정

사용자가 폴더를 선택할 경우 folderPicker를 사용합니다. 만든 개체에서 속성을 설정하여 이 클래스를 사용자 지정할 수 있습니다.

파일 선택기 샘플에서는 folderPicker 개체를 만들고 사용자 지정하는 방법에 대해 설명합니다.
```
// Create the picker object and set options
var folderPicker = new Windows.Storage.Pickers.FolderPicker;
folderPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.desktop;
// Users expect to have a filtered view of their folders depending on the scenario.
// For example, when choosing a documents folder, restrict the filetypes to documents for your application.
folderPicker.fileTypeFilter.replaceAll([".docx", ".xlsx", ".pptx"]);
```
사용자 및 앱과 관련된 파일 선택기 개체에서 속성을 설정해야 합니다. 파일 선택기 사용자 지정 방법을 결정하는 데 도움이 되는 지침은 파일 선택기에 대한 지침 및 검사 목록을 참조하세요. 파일 선택기 샘플에서 파일 선택기를 사용자 지정하기 위해 특정 속성을 설정하는 이유에 대한 설명을 보려면 계속 읽어 보세요.

파일 선택기 샘플 folderPicker 사용자 지정(설명)

파일 선택기 샘플에서는 세 가지 folderPicker 속성(viewMode, suggestedStartLocation 및 fileTypeFilter 속성)을 사용하여 폴더를 선택하도록 파일 선택기를 사용자 지정합니다.
- folderPicker.viewMode에 기본 PickerViewMode.list를 사용하면 파일 선택기에서 목록과 유사한 디스플레이를 만들 수 있습니다. 이 목록은 문서와 같이 시각적이지 않은 파일을 선택하는 데 적합합니다.
  
  파일 선택기를 사용하여 사진이나 비디오 같은 시각적 파일을 표시하려면 viewMode를 PickerViewMode.thumbnail로 설정해야 합니다. 그렇지 않으면 PickerViewMode.list를 사용합니다.
  
  사진이나 비디오 같은 시각적 파일을 표시하려면 다음과 같이 folderPicker.viewMode를 thumbnail로 설정해야 합니다.
```
folderPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
```
- PickerLocationId.desktop을 사용하여 folderPicker.suggestedStartLocation을 사용자의 데스크톱으로 설정하면 사용자가 많이 사용하는 익숙한 위치에서 시작할 수 있습니다.
```
folderPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.desktop;
```
  suggestedStartLocation은 사용자가 선택하려는 폴더의 형식에 적합한 파일 시스템 위치로 설정해야 합니다. 예를 들어 사용자가 음악 파일이 포함된 폴더를 선택하려는 경우에는 음악에서 시작해야 합니다. 단지 시작 위치일 뿐이며, 사용자는 파일 선택기를 사용하는 동안 다른 위치로 이동할 수 있습니다.
  
  또한 suggestedStartLocation이 항상 파일 선택기의 시작 위치로 사용되는 것은 아닙니다. 사용자에게 일관성을 제공하기 위해 파일 선택기는 사용자가 마지막으로 본 위치를 기억하며 일반적으로 해당 위치에서 시작합니다.
- folderPicker.fileTypeFilter.replaceAll를 사용하여 사용자가 파일 선택기에서 볼 수 있는 파일 형식을 지정하면 사용자가 관련된 폴더를 선택하는 데 집중하도록 할 수 있습니다.
```
folderPicker.fileTypeFilter.replaceAll([".docx", ".xlsx", ".pptx"]);
```
  사용자는 folderPicker를 통해 폴더만 선택할 수 있으며 개별 파일은 선택할 수 없습니다. 그러나 folderPicker에 관련 파일을 표시하면 사용자가 선택할 폴더를 결정하는 데 도움이 됩니다. 예를 들어 folderPicker를 사용하여 사진을 가져올 위치를 선택하려는 경우 이미지 파일을 표시하면 사용자가 위치를 선택할 때 가져올 항목을 식별하는 데 도움이 됩니다.
사용자가 단일 폴더를 선택하도록 folderPicker 표시

folderPicker를 만들어 사용자 지정한 후 folderPicker.pickSingleFolderAsync를 호출하여 사용자가 폴더를 선택하도록 합니다. 사용자가 폴더를 선택하면 folderPicker.pickSingleFolderAsync는 선택된 폴더를 나타내는 storageFolder를 반환합니다. 예외가 제대로 전파되도록 하려면 done을 사용하여 이 폴더를 캡처하고 처리해야 합니다.

파일 선택기 샘플에서는 사용자가 폴더를 선택할 수 있는 파일 선택기를 표시하는 방법과 처리하기 위해 선택한 폴더를 캡처하는 방법을 보여 줍니다.
```
folderPicker.pickSingleFolderAsync().then(function (folder) {
    if (folder) {
        // Application now has read/write access to all contents in the picked folder (including sub-folder contents)
        // Cache folder so the contents can be accessed at a later time
        Windows.Storage.AccessCache.StorageApplicationPermissions.futureAccessList.addOrReplace("PickedFolderToken", folder);
        WinJS.log && WinJS.log("Picked folder: " + folder.name, "sample", "status");
    } else {
        // The picker was dismissed with no selected file
        WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
    }
});
```
folderPicker.pickSingleFolderAsync 호출이 완료되면 선택된 폴더가 함수 리터럴에 전달되어 folder 매개 변수로 처리됩니다. 선택된 폴더는 storageFolder 개체로 표시됩니다. 작업을 취소하고 아무것도 선택하지 않으면 이 매개 변수는 null이 됩니다.

요약 및 다음 단계

여기에 나온 것과 유사한 코드를 사용하는 경우 앱에서는 파일 선택기를 표시하여 사용자가 앱에서 열 수 있는 파일이나 폴더를 하나 이상 선택할 수 있게 됩니다.

팁 앱이 파일 선택기를 통해 파일 또는 폴더에 액세스할 경우 항상 해당 항목을 앱의 futureAccessList 또는 mostRecentlyUsedList에 추가하여 추적합니다. 이러한 목록을 사용하는 방법에 대한 자세한 내용은 최근에 사용한 파일 및 폴더를 추적하는 방법을 참조하세요.

파일 읽기 및 쓰기에 대한 자세한 내용은 빠른 시작: 파일 읽기 및 쓰기와 파일 액세스 샘플을 참조하세요. 이미지 파일 작업에 대한 자세한 내용은 이미지 선택 및 표시 방법, 이미지를 디코드하는 방법 및 Blob을 사용하여 콘텐츠 저장 및 로드 샘플(영문)을 참조하세요.

파일 선택기를 호출하여 파일을 저장하는 방법에 대한 자세한 내용은 파일 선택기를 통해 파일을 저장하는 방법을 참조하세요.

앱에서 다른 앱에 파일, 저장 위치 또는 파일 업데이트를 제공하도록 하려면 빠른 시작: 파일 선택기 계약과 통합을 참조하세요.