Question

我的问题有两方面：一个问题涉及在浏览器中打开保存的html文件的机制（没有互联网连接），另一个涉及利用浏览器作为桌面图像查看程序的用户界面I＆＃dd; d喜欢写。

基本上，我有几百张专辑（文件夹），每张专辑都有可变数量的图片（50个左右），我希望能够在一个可滚动的屏幕上加载相册中的所有图像，并且还有办法打开其他专辑（组合框或表格或其他任何名称）。

我发现的第一个问题是，显然javascript故意无法搜索目录并枚举文件。这是有道理的，因为任何其他方式都会带来明显的安全风险。

我了解到像php这样的服务器端脚本语言可以做我需要的东西（我对php一无所知）但是，似乎php要求我运行像Apache这样的Web服务器（再次，我不是＆＃ 39;我真的知道我在说什么，请原谅我），我真的不想这样做。运行服务器我感到不舒服，因为我不知道如何安全地操作它。此外，它似乎需要很多开销。

我有一个可能（丑陋）的解决方案，我目前正在考虑如何实施它。基本上，我认为我可以在索引HTML页面中包含一个专辑目录列表作为超链接（我会根据需要手动更新）。超链接将链接到图像的模板html页面，并将相册名称包括为查询字符串。 Javascript代码将读取查询字符串并形成该相册的URL。

在每个专辑中，都会有一个JSON文件存储该专辑中确切的图像数量，以及将按照数字顺序命名的图像本身（img1.jpg，img2.jpg等）。然后javascript读取json文件并开始添加其URL能够基本猜测的图像。

实际上很难找到有关JSON的信息。似乎访问JSON文件的唯一方法是使用XMLhttpRequest。这让我开始想知道当网页在你自己的电脑上运行时，网页浏览器（Chrome浏览器，如果它们各不相同）处理服务器和客户端之间的区别。由于我没有运行服务器，XMLhttpRequest会工作吗？或者我在技术上已经是服务器和客户端了？如果是这样，我可以在不运行Apache的情况下使用php吗？此外，HTTP究竟如何适应这一点？浏览器是否仍然发送了我的电脑在进入我的路由器之前立即截获的HTTP请求，或者是否通过完全不同的机制获取信息？

以上一串问题是这篇文章的真正目的，但由于我已经解释了所有内容，我想我也可以问一下是否有人有任何想法或看到我上面概述的过程有任何明显的问题。我不是电脑编程的新手，但我是互联网编程的新手，所以我可能会忽略一些显而易见的事情。

感谢所有读过这篇文章的人！我很感激，我希望听到你的想法！

Answer 1

首先，如果我理解你的问题，那么你想要实现的基本上是制作一种图库应用程序，它允许你在浏览器中浏览指定相册中的图片（离线）。

现在，我从你的陈述中得到的表达是那些文件与静态名称相当静态，如album1 / image1.jpg，album1 / imgage2.jpg，album2 / image1.jpg等等。现在，当您处于离线模式时，将直接从您的目录中读取它们。这将不会是一个问题！您正在考虑错误的方向，您在此处感到困惑（阅读客户端目录）不是问题，因为您将设计一个将在客户端计算机上脱机运行且不会托管在服务器上的页面。所以这不是问题。我认为你是html，javascrript编程的新手。

不要害怕！所以这是你应该做的，我会给你一个你将要做的事情的概述。首先，在UI上稍微工作一下，就像这些图像的显示方式一样。大概它会是这样的：顶部的div用于显示图像，底部的div用较短的高度和相册列表。您将在两个简单的循环中填充专辑的列表和图像（考虑到您知道专辑/图像的数量）。因此，您将在循环中创建这些图像，基本上给出每个图像的'src'，如：

for(var i=0; i<your number of albums; i++){
    for(var j=0; j<number of pics in that album; j++){
         <image class="img" src="album"+i+"/image"+j+".jpg">
    }
}

这大致是你将如何填充你的图像..现在浏览器将只是首先加载UI，然后用你提供的这些src填充图像容器（从用户的目录，没有问题）。其余的将是来自下一个，前一个按钮，新专辑选择等的事件监听器。

我希望我理解你的问题并给出了足够好的解释。哦，还有一件事，为了让它在所有机器上运行（但在线），你可以在线和src托管这些图片，给每张图片的网址如http://dropbox.com/axndk/album1/image1.jpg ...这样的东西。如果您有任何其他问题或疑惑，我们可以对此进行详细讨论，我也很乐意为您提供帮助。此致

编辑：从您的目录中读取图片并在浏览器中显示它不是问题，请尝试使用这个简单的html并在浏览器中打开它以获得一个想法：

<!DOCTYPE html>
<html>
<body>
    <img src="Your image's complete path will come here" style="width:304px;height:228px">   
</body>
</html>

打开保存的HTML页面/浏览器作为用户界面

1 个答案: