如何使用 WinJS.xhr 上傳二進位資料 (HTML)

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

您可以在使用 WinJS.xhr (其中包裝 XMLHttpRequest) 時，上傳和下載二進位資料。這個範例說明如何從圖片上傳點陣圖。開啟點陣圖檔案的 Windows 執行階段方法會傳回 IRandomAccessStream，因此您必須使用 MSApp.createBlobFromRandomAccessStream 將它轉換成 Blob。

警告您現在可以使用 XMLHttpRequest 來上傳或下載大於數 MB 的物件，例如 Blob 物件和 FormData 物件，不過可能需要一段很長的時間才能完成。因為應用程式可能隨時都會終止，您應該考慮使用 Windows 執行階段背景傳輸 API 來進行這些操作。如需上傳和下載內容的詳細資訊，請參閱如何上傳檔案和如何下載檔案。如需一般的背景傳輸討論，請參閱＜Transferring data in the background＞。

先決條件

我們假設您能夠以適用於 JavaScript 的 Windows Library 建立基本的應用程式。如果建立您的第一個應用程式時需要協助，請參閱使用 JavaScript 建立您的第一個 Windows 執行階段應用程式。

指示

步驟 1: 設定您的應用程式用於存取圖片和網頁

應用程式必須明確新增特定功能，例如存取硬碟上的特定媒體櫃或是存取網路的功能。如需功能的詳細資訊，請參閱應用程式功能宣告和如何設定網路功能。

在 Visual Studio 中，建立空白的 JavaScript 應用程式。
開啟 package.appxmanifest 檔案，然後移至 [功能] 索引標籤。
如果是 Windows 版的範例，應該已經選取 [網際網路 (用戶端)]**** 功能 (如果尚未選取，請立即選取)。如果應用程式可能需要以用戶端的形式連線到家用或工作網路上的 Web 服務，那麼也需要 [私人網路 (用戶端與伺服器)] 功能。

如果是 Windows Phone 版的範例，請選取 [網際網路 (用戶端與伺服器)]**** 功能。

注意在 Windows Phone，只有一個網路功能 ([網際網路 (用戶端與伺服器)]) 能啟用應用程式的所有網路存取功能。
選取 [圖片庫]**** 功能。

步驟 2: 上傳點陣圖

有一些可以處理檔案存取的非同步方法。這些非同步方法的處理方式與 JavaScript 中的任何其他 Promise 類似。

注意如需詳細資訊，請參閱 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 Helper 函式可以執行該動作。您可以將產生的 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: 上傳點陣圖

相關主題

其他資源