从文件夹加载所有图像：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' 目录加载图像 app.I 也在 cordova windows 商店应用程序中尝试了此代码，但这也没有用。

Answer 1

But looks like ajax doesnt works in winJS UWP app

首先，UWP应用程序支持ajax，但有几点需要注意，详情请参考. But although jQuery.ajax() can be used in a UWP app, you cannot make a AJAX call to a local resource as the request is made using HTTP. For details about this please reference this thread。

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

根据你的场景，你需要从本地目录加载图片，这样你就不能使用AJAX调用。你可以只使用UWP中的文件操作相关API来加载图片，例如StorageFolder and StorageFile classes. More details about how to do please reference this article and this official sample。这是一个从 WinJs UWP 应用程序的 "images/bussiness" 目录加载图像的演示，您可以参考：

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);
                }
            });
        });
    });
}

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

Load all images from folder: winjs uwp app

javascript

jquery

ajax

uwp

winjs