Question

我正在尝试使用jQuery从本地目录加载图像，我收到此错误：

file:///Users/[username]/Desktop/the/pics/Failed to load resource: Failed to load resource: file is directory

我正在尝试使用jquery在页面上排列一堆图片，大小相同。

我在桌面上有一个索引文件，桌面上的图像文件夹也在/ pics目录下。索引文件如下所示：

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Images</title>
  <script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
  <script>
    var dir = "the/pics/";
    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("<div class=\"crop\" ><img src='" + dir + filename + "'></div>");
        });
      }
    });
  </script>
  <style>
    body {
      max-width: 960px;
      margin: 0 auto;
    }
    
    .crop {
      width: 200px;
      height: 150px;
      overflow: hidden;
    }
    
    .crop img {
      width: 400px;
      height: 300px;
      margin: -75px 0 0 -100px;
    }
  </style>
</head>

<body>




</body>

</html>

＆＃13;

Answer 1

从javascript处理本地文件时，有很多安全方法可以参与其中。例如，您只能从多个文件夹中读取文件（例如，您甚至无法在文件上传浏览器窗口中访问％WINDOWS％\ Fonts，至少在Firefox 55中）。

当这个javascript驻留在本地文件而不是通过HTTP提供的网站时，这会受到更多限制。这可以防止攻击向量将一小段HTML写入磁盘（例如缓存），然后意外或恶意执行。

虽然听起来有违反直觉：驻留在本地html文件中的脚本拥有的权限最少。

其中一个原因是Same-Origin Policy表明只有那些资源是可信赖的，这些资源是从同一个域的同一个网络服务器提供的。（事实上，它说的更多一点，包括如何将资源列入白名单等。）

但事实是：硬盘驱动器上的每个文件都被视为一个不同的位置，这包括图像文件，因为这些文件可能不属于这些文件。这意味着：本地图像无法访问脚本。

总而言之，只要它正确实施，它就是一个非常好的安全措施。

在这种情况下，您唯一能做的就是：确保您的脚本（以及它所在的html页面）通过http提供。如有必要，请使用您的hosts - 文件添加您需要解决的本地域或设置自己的DNS服务器。

Answer 2

Heyo，

出于安全考虑，浏览器会屏蔽Same-Origin Policy。

您只需使用一个简单的python http服务器即可拥有静态服务器只需在要提供的文件夹中运行此行 python -m SimpleHTTPServer

尝试使用jquery从本地目录加载图像

2 个答案: