如何使用 WinJS.xhr 上载二进制数据 (HTML)

项目
12/11/2015

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

使用 WinJS.xhr（它将 XMLHttpRequest 包起来）时，可以上载和下载二进制数据。此示例展示如何从你的图片上载位图。用于打开位图文件的 Windows 运行时方法会返回一个 IRandomAccessStream，因此你必须使用 MSApp.createBlobFromRandomAccessStream 将其转换为 Blob。

警告你现在可以使用 XMLHttpRequest 上载或下载超过几 MB 的对象，如 Blob 对象和 FormData 对象，这可能会需要很长时间才能完成。因为可能会随时终止应用，所以你应该考虑为这些操作使用 Windows 运行时后台传输 API。有关上载和下载内容的详细信息，请参阅如何上载文件和如何下载文件。有关后台传输的一般讨论，请参阅 Transferring data in the background。

先决条件

我们假设，你可以创建使用 Windows JavaScript 库的基本应用。有关创建第一个应用的帮助，请参阅创建第一个采用 JavaScript 的 Windows 运行时应用。

说明

步骤 1: 设置你的应用以访问图片和 Web

应用需要显式添加某些功能，如访问硬盘上的某个特定库，或访问网络有关这些功能的详细信息，请参阅应用功能声明和如何配置网络功能。

在 Visual Studio 中，创建一个空白 JavaScript 应用。
打开 package.appxmanifest 文件并转到“功能”选项卡。
对于该示例的 Windows 版本，应已选中“Internet (客户端)”****功能，但如果尚未选中，则立即进行此操作。如果应用需要作为客户端连接到家庭网络或工作网络上的 Web 服务，则还需要设置“专用网络(客户端和服务器)”功能。

对于示例的 Windows Phone 版本，请选择“Internet (客户端和服务器)”****功能。

注意在 Windows Phone 上，只存在“Internet (客户端和服务器)”这一种网络功能，该功能支持对该应用的所有网络访问。
选中“图片库”****功能。

步骤 2: 上载位图

存在许多处理文件访问的异步方法。会像处理 JavaScript 中的任何其他承诺一样处理这些异步方法。

注意有关详细信息，请参阅使用 JavaScript 异步编程。

在 default.html 文件的 BODY 部分中，添加一个报告上载成功或失败的 DIV 元素，并给它分配一个名为 picDiv 的 ID：
```
<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: 设置你的应用以访问图片和 Web

步骤 2: 上载位图

相关主题

其他资源