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

问题描述 投票:1回答:4

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

javascript jquery image gallery offline
4个回答
0
投票

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

你不能在客户端使用Javascript的主要原因是因为它对普通用户来说是冒险的,任何javascript开发人员都可以通过创建客户端javascript漏洞入侵用户的文件系统

如果你想使用原始的vanilla 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一样学习它


1
投票

非常感谢你的善意和善意,我非常感谢所有的帮助和建议。你真棒。

mgabor6,我正在看看Electron,它似乎是一个非常强大的工具。也许我会深入研究它。

Ashvani Mishra,这是一个有趣的方法,我现在正在看它。

谢谢你们!


0
投票

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

例如VSCode,或Spotify以同样的方式。

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

从头开始也有一些很好的YouTube视频。学习它并开始一个基本项目需要一点时间投入,但如果你有一个基本的javascript知识,那么它可能是一个很好的起点。


0
投票

如果您只想在页面上显示图像,可以使用此approch。这只是一个基本的例子,你可以提供样式和更多,以使其具有吸引力。如果您还想要保存它,可以使用本地存储。

<!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>
© www.soinside.com 2019 - 2024. All rights reserved.