WinJS.xhr을 사용하여 이진 데이터를 업로드하는 방법(HTML)

아티클
12/11/2015

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

XMLHttpRequest를 래핑하는 WinJS.xhr을 사용할 때는 이진 데이터를 업로드 및 다운로드할 수 있습니다. 이 예제에서는 사진에서 비트맵을 업로드하는 방법을 보여줍니다. 비트맵 파일을 여는 데 사용되는 Windows 런타임 메서드는 IRandomAccessStream을 반환하므로, MSApp.createBlobFromRandomAccessStream을 사용하여 Blob로 변환해야 합니다.

경고 이제는 XMLHttpRequest를 사용하여 Blob 개체 및 FormData 개체와 같이 완료하는 데 시간이 오래 걸릴 수 있는 몇 MB보다 큰 개체를 업로드하거나 다운로드할 수 있습니다. 앱은 언제든지 종료할 수 있으므로 이러한 작업에 Windows 런타임 백그라운드 전송 API를 사용하는 것을 고려해야 합니다. 콘텐츠 업로드 및 다운로드에 대한 자세한 내용은 파일을 업로드하는 방법 및 파일을 다운로드하는 방법을 참조하세요. 백그라운드 전송에 대한 일반적인 설명은 Transferring data in the background을 참조하세요.

사전 요구 사항

여기서는 JavaScript용 Windows 라이브러리를 사용하는 기본 앱을 만들 수 있다고 가정합니다. 첫 번째 앱을 만드는 자세한 내용은 JavaScript를 사용하여 첫 번째 Windows 런타임 앱 만들기를 참조하세요.

지침

단계 1: 사진 및 웹 액세스를 위해 앱 설정

앱에서는 하드 드라이브의 특정 라이브러리 또는 네트워크 액세스 접근 권한 값과 같은 특정 접근 권한 값을 명시적으로 추가해야 합니다. 접근 권한 값에 대한 자세한 내용은 앱 접근 권한 값 선언 및 네트워크 접근 권한 값을 구성하는 방법을 참조하세요.

Visual Studio에서 빈 JavaScript 앱을 만듭니다.
package.appxmanifest 파일을 열고 접근 권한 값 탭으로 이동합니다.
Windows 버전 샘플의 경우 인터넷(클라이언트) 접근 권한 값이 선택되어 있습니다. 선택되어 있지 않으면 선택합니다. 앱이 홈 네트워크 또는 회사 네트워크의 웹 서비스에 클라이언트로 연결해야 할 경우 개인 네트워크(클라이언트 및 서버) 접근 권한 값이 필요합니다.

Windows Phone 버전 샘플의 경우 인터넷(클라이언트 및 서버) 접근 권한 값을 선택합니다.

참고 Windows Phone에는 앱에서 네트워크에 완전히 액세스하게 해 주는 단일 네트워크 접근 권한 값(인터넷(클라이언트 및 서버))이 있습니다.
사진 라이브러리 접근 권한 값을 선택합니다.

단계 2: 비트맵 업로드

파일 액세스를 처리하는 여러 가지 비동기 메서드가 있습니다. 이러한 비동기 메서드는 JavaScript의 다른 항목과 같이 처리됩니다.

참고 자세한 내용은 JavaScript의 비동기 프로그래밍을 참조하세요.

default.html 파일의 BODY 섹션에서 업로드 성공 또는 실패를 보고하는 DIV 요소를 추가한 다음 ID를 "picDiv"로 지정합니다.
```
<div id="picDiv"></div>
```

코드에서 DIV 및 사진에 대한 참조를 설정합니다.

var picDiv = document.getElementById("picDiv");
var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;

사진에서 원하는 파일을 찾습니다. WinJS.xhr을 사용하여 이 파일을 업로드할 수도 있지만, 여기서는 파일을 다시 인코딩하거나 다른 처리를 수행하려 한다고 가정합니다. getFileAsync 메서드 then 절의 completeFile 함수에서 openAsync를 사용하여 파일을 엽니다. 그런 다음 openAsync 메서드 then 절의 completeStream 함수에서 IRandomAccessStream 유형의 열린 파일 스트림에 대해 수행해야 하는 처리를 수행합니다.
```
picturesLibrary.getFileAsync("myBitmap.bmp").then(
    function completeFile(file) {
        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
        }).then(
            function completeStream(stream) {
                // Do processing. 
    });
```

이제 업로드를 위해 필요한 작업을 수행합니다. WinJS.xhr 및 XMLHttpRequest는 IRandomAccessStream 유형의 업로드를 허용하지 않으므로 스트림을 Blob로 변환해야 합니다. 이 작업 전용으로 사용할 수 있는 MSApp.createBlobFromRandomAccessStream 도우미 함수를 사용할 수 있습니다. 변환된 Blob는 WinJS.xhr의 data 옵션에 추가할 수 있습니다. WinJS.xhr의 then 절에서 업로드 성공 또는 실패를 처리할 수 있습니다.

picturesLibrary.getFileAsync("myBitmap.bmp").then(
    function completeFile(file) {
        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
    }).then(
        function completeStream(stream) {
            // Do processing. 
            var blob = MSApp.createBlobFromRandomAccessStream("image/bmp", stream);
            return WinJS.xhr({ type: "POST", url: <URI of the website>, data: blob });
        }).then(
            function (request) {
                picDiv.textContent = "uploaded file";
            }, 
            function (error) {
                picDiv.textContent = "error uploading file";
    });

앱을 실행합니다. 이제 파일을 업로드할 수 있습니다.

다음을 통해 공유

WinJS.xhr을 사용하여 이진 데이터를 업로드하는 방법(HTML)

사전 요구 사항

지침

단계 1: 사진 및 웹 액세스를 위해 앱 설정

단계 2: 비트맵 업로드

관련 항목

추가 리소스