如何使用 javascript/jquery 从本地文件夹自动加载多个图像?
How can I auto load multiple images from a local folder using javascript/jquery?
我正在尝试构建一个离线图像查看器(也许也是管理器,但稍后)。所以我想从一个文件夹中自动加载多个图像,而不用在 html 上声明它们(即不对每个图像使用)。
是否可以仅使用 javascript/jquery 和 no 服务器端语言(例如 php)?
提前致谢!
我不太清楚,但我认为您实际上无法使用 javascript 读取文件。至少在客户端使用原始 javascript 。但是,您可以上传一些文件,然后将其存储在您正在构建的特定应用程序中
您不能在 Javascript 从客户端执行此操作的主要原因是因为这对普通用户有风险,任何 javascript 开发人员都可以通过创建客户端 javascript 利用
如果你想使用 raw 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
您可以使用 electronjs 从 javascript 项目制作桌面应用程序。您也可以读取和操作文件。
比如VSCode,或者Spotify也是用同样的方法制作的。
如果感兴趣,请勾选 https://electronjs.org/。
也有一些不错的 YouTube 视频可以从头开始。了解它并开始一个基本项目需要一点时间投入,但如果你有基本的 javascript 知识,那么它可能是一个很好的起点。
如果你只想在页面上显示图像,你可以使用这个方法。这只是一个基本示例,您可以提供样式等等以使其具有吸引力。
如果你也想本地保存,可以使用本地存储。
<!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>
我正在尝试构建一个离线图像查看器(也许也是管理器,但稍后)。所以我想从一个文件夹中自动加载多个图像,而不用在 html 上声明它们(即不对每个图像使用)。 是否可以仅使用 javascript/jquery 和 no 服务器端语言(例如 php)? 提前致谢!
我不太清楚,但我认为您实际上无法使用 javascript 读取文件。至少在客户端使用原始 javascript 。但是,您可以上传一些文件,然后将其存储在您正在构建的特定应用程序中
您不能在 Javascript 从客户端执行此操作的主要原因是因为这对普通用户有风险,任何 javascript 开发人员都可以通过创建客户端 javascript 利用
如果你想使用 raw 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
您可以使用 electronjs 从 javascript 项目制作桌面应用程序。您也可以读取和操作文件。
比如VSCode,或者Spotify也是用同样的方法制作的。
如果感兴趣,请勾选 https://electronjs.org/。
也有一些不错的 YouTube 视频可以从头开始。了解它并开始一个基本项目需要一点时间投入,但如果你有基本的 javascript 知识,那么它可能是一个很好的起点。
如果你只想在页面上显示图像,你可以使用这个方法。这只是一个基本示例,您可以提供样式等等以使其具有吸引力。 如果你也想本地保存,可以使用本地存储。
<!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>