javascript - 加载文件夹 : 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 应用程序中的“image/buisness”目录加载图像。我还在 cordova windows store 应用程序中尝试了此代码，但这也不起作用。

Answer 1

But looks like ajax doesnt works in winJS UWP app

首先，UWP应用支持ajax，但是有一些需要注意的地方，详细信息请引用this thread 。但尽管jQuery.ajax()可以在 UWP 应用中使用，但您无法对本地资源进行 AJAX 调用，因为请求是使用 HTTP 发出的。详细信息请引用this thread .

How can load images from my 'image/buisness' directory in winJS UWP app

根据您的场景，您需要从本地目录加载图像，这样您就无法使用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);
                }
            });
        });
    });
}