如何使用 javascript/jquery 从本地文件夹自动加载多个图像？答案

【问题标题】：How can I auto load multiple images from a local folder using javascript/jquery?如何使用 javascript/jquery 从本地文件夹自动加载多个图像？
【发布时间】：2019-08-17 02:24:45
【问题描述】：

我正在尝试构建一个离线图像查看器（也许也是管理器，但稍后）。所以我想从一个文件夹中自动加载多个图像，而不在 html 上声明它们（即，不使用每个图像）。是否可以仅使用 javascript/jquery 和 no 服务器端语言（例如 php）？提前致谢！

【问题讨论】：

标签： javascript jquery image gallery offline

【解决方案1】：

我不清楚，但我认为您实际上不能使用 javascript 读取文件。至少在客户端使用原始 javascript 。但是，您可以上传一些文件，然后将其存储在您正在构建的特定应用程序中

您不能从客户端使用 Javascript 执行此操作的主要原因是因为这对普通用户来说是有风险的，任何 javascript 开发人员都可以通过创建客户端 javascript 漏洞利用来侵入用户的文件系统

如果你想使用原始的香草 javascript 上传文件，你可以这样做......

<input id="image-file" type="file" />

然后像这样通过javascript处理它

document.getElementById("image-file").addEventListener('onclick', function(e){
  const file = e.target.files[0];
  // your code
})

但如果你真的想从特定目录加载图片，你必须使用像 Node.js 这样的服务器端语言，你可以学习像this

【讨论】：

我明白你的意思。当然，如果 javascript 可以进入某人的本地文件夹，那将是一团糟……对不起这个愚蠢的问题，我不是开发人员，只是一个 DIY 人；）。我会尝试这两个建议。非常感谢您的帮助（和快速的帮助！）以及如此友善和清晰。祝您度过愉快的一周，Adib Mohsin！

【解决方案2】：

您可以使用 electronjs 从 javascript 项目制作桌面应用程序。您也可以读取和操作文件。

例如 VSCode 或 Spotify 也是如此。

如果有兴趣，请查看https://electronjs.org/。

也有一些不错的 youtube 视频可以从头开始。学习它并开始一个基本项目需要花费一点时间，但如果你有基本的 javascript 知识，那么它可能是一个很好的起点。

【讨论】：

【解决方案3】：

如果您只想在页面上显示图像，您可以使用此方法。这只是一个基本示例，您可以提供样式等等以使其更具吸引力。如果还想本地保存，可以使用本地存储。

<!DOCTYPE html>
<html>
<head>
<script 

src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$('#image-file').change(function(e){
for(let i=0;i<e.target.files.length;i++)
{
  let file = e.target.files[i];

$("body").append('<img src="'+URL.createObjectURL(file)+'">');


}
});
});


</script>
</head>
<body>
<input id="image-file" type="file" multiple/>

</body>
</html>

【讨论】：