Question

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

Answer 1

非常感谢您的善意和友善，非常感谢您提供的所有帮助和建议。你真棒。

mgabor6 ，我正在查看Electron，它似乎是一个非常强大的工具。也许我会深入其中。

Ashvani Mishra ，这是一种有趣的方法，我现在正在研究。

谢谢大家！

Answer 2

我不清楚，但我认为您实际上无法使用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

Answer 3

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

例如VSCode或Spotify都采用相同的方式。

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

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

Answer 4

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

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

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

4 个答案: