从文件夹加载所有图像：winjs uwp app

Question

我正在使用 javascript (winJS) 来制作我的 Windows 商店应用程序（UWP 应用程序）。我想从我的应用程序目录中加载所有 svg 图像并将它们显示在 div 中。 我能够使用 ajax 请求来做到这一点。但看起来 ajax 在 winJS UWP 应用程序中不起作用。我像这样使用 jquery 和 ajax 请求：

var fileextension = ".svg";
var classx = "image";
var tr = "true";

var businessDir = "image/business";
$.ajax({
    url: businessDir,
    success: function (data) {
        $(data).find("a:contains(" + fileextension + ")").each(function () {
            var filename = this.href.replace(window.location.host, "").replace("http:///", "");

            $(".myDiv").append($("<img src=" + filename + " class=" + classx + " draggable=" + tr + "></img>"));

        });
    }
});

如何在 winJS UWP 应用程序中从我的“图像/业务”目录加载图像。我也在科尔多瓦 Windows 商店应用程序中尝试过此代码，但也没有用。

Answer 1

但是看起来 ajax 在 winJS UWP 应用中不起作用

首先，UWP应用支持ajax，但有几点需要注意，具体请参考this thread。但是，尽管 jQuery.ajax() 可以在 UWP 应用程序中使用，但您不能对本地资源进行 AJAX 调用，因为请求是使用 HTTP 发出的。详情请参考this thread。

如何在 winJS UWP 应用中从我的“图像/业务”目录加载图像

根据您的场景，您需要从本地目录加载图像，因此您无法使用 AJAX 调用。您可以只使用 UWP 中的文件操作相关 API 来加载图像，例如 Storage​Folder 和 StorageFile 类。更多详情请参考this article 和this official sample。这是一个从 WinJs UWP 应用中的“images/business”目录加载图像的演示，您可以参考：

function addimage() { 
    var classx = "image";
    var tr = "true";
    var root = Windows.ApplicationModel.Package.current.installedLocation.path;
    var path = root + "\\images\\business";
    var StorageFolder = Windows.Storage.StorageFolder;
    var folderPromise = StorageFolder.getFolderFromPathAsync(path);
    folderPromise.done(function getFolderSuccess(folder) {
        var filesInFolderPromise = folder.getFilesAsync();
        filesInFolderPromise.done(function getFilesSuccess(filesInFolder) {
            filesInFolder.forEach(function forEachFile(item) {             
                if (item.name.includes("svg")) {
                    var img = document.createElement("img");
                    img.src = "images/business/" + item.name;
                    document.getElementById("myDiv").appendChild(img);
                }
            });
        });
    });
}