Question

我想从本地文件夹中获取图片并将其发布在网页上。

图片未在网页上加载，但在控制台中没有错误。

<head>
    <title> </title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script type="text/javascript">

        var dir = "/Users/me/Desktop/imgtest/";
        var fileextension = ".jpeg";
        $.ajax({
            url: dir,
            success: function (data) {
                $(data).find("a:contains(" + fileextension + ")").each(function () {
                    var filename = this.href.replace(window.location.host, "").replace("http://", "");
                    $("body").append("<img src='" + dir + filename + "'>");
                });
            }
        });
    </script>
</head>
<body>

Answer 1

由于您未加载页面，因此无法运行。 您应该在正文结束之前添加此脚本，或者在调用Ajax脚本之前使用$(document).ready确保页面正在加载。

<script type="text/javascript">

        var dir = "/Users/me/Desktop/imgtest/";
        var fileextension = ".jpeg";
  $(document).ready(function(){
        $.ajax({
            url: dir,
            success: function (data) {
                $(data).find("a:contains(" + fileextension + ")").each(function () {
                    var filename = this.href.replace(window.location.host, "").replace("http://", "");
                    $("body").append("<img src='" + dir + filename + "'>");
                });
            }
        });
});
    </script>

Answer 2

将脚本代码包装在文档就绪函数中，如下所示：

{{1}}

然后，运行本地Web服务器以避免XSS问题。

jquery ajax从本地文件夹

2 个答案: