jquery ajax从本地文件夹加载图片

我想从本地文件夹中获取图片并将其发布到网页上。jquery ajax从本地文件夹加载图片

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

<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>

来源

2017-10-21 ntf

您是否尝试过'dir =“file：/// Users/me/Desktop/imgtest /”'？ –

@KarlReid仍然无法正常工作。 – ntf

Javascript在浏览器中运行，**不能访问本地资源。否则这将是一个巨大的安全漏洞。 –

这不能运行，因为你页面没有加载。 您应该在您的主体结束之前添加此脚本，或使用$(document).ready以确保您在调用Ajax脚本之前加载页面。

<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>

来源

2017-10-21 23:48:14

仍然不能正常工作 – ntf

这是出于安全原因，是正常的，您应该添加画布或将你的图像转换为base64以正确加载而没有任何安全风险... https://www.base64-image.de/如何在这里加载base64图像https://stackoverflow.com/questions/8499633/how-to -display-base64-images-in-html – 2017-10-22 00:06:37

我会尝试那些。我在文件夹中有很多jpeg，因此转换可能会耗费手动时间。画布没有工作。 – ntf

环绕你的脚本代码在文档准备功能，像这样：

$(document).ready(function() { 
    // your code here 
});

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

来源

2017-10-21 23:51:19

用Chrome网页服务器试用过。出现错误：加载资源失败：服务器响应状态为404（未找到） – ntf

找不到哪个资源？ –

jquery ajax从本地文件夹加载图片

回答

相关问题