gpt4 book ai didi

javascript - 使用文件名从本地目录加载多个图像

转载 作者:行者123 更新时间:2023-12-03 05:21:00 25 4
gpt4 key购买 nike

我正在编写一个简单的网站,它使用包含 all of these 的 txt 文件在本地目录中加载多个图像。图像的名称。

流程是网站读取txt文件中的图片名称(即1.jpg),然后将相应名称的图片加载到网站。

我目前陷入这个困境。欢迎任何建议:)

更新1

我很抱歉。我已成功地逐行读取输入文件。虽然,我还没有弄清楚如何将每一行添加到数组中以便稍后加载它们。

JavaScript 代码

document.getElementById('file').onchange = function(){

var file = this.files[0];

var reader = new FileReader();
reader.onload = function(progressEvent){
// By lines
var lines = this.result.split('\n');
arr
for(var line = 0; line < lines.length; line++){
console.log(lines[line]);
}
};
reader.readAsText(file);
};

HTML 代码

<!DOCTYPE html>

<html>
<head>

<title>Test</title>
</head>

<body>

<input type="file" name="file" id="file">
<script type="text/javascript" src= "Functions.js"></script>
</body>
</html>

更新2

我认为我已将名称添加到数组 (ImageNameList) 中,但在显示所有图像时仍然遇到问题。这是我到目前为止所拥有的:

JavaScript

document.getElementById('file').onchange = function(){

var file = this.files[0];

var ImageNameList = [];
var reader = new FileReader();
reader.onload = function(progressEvent){
// By lines
var lines = this.result.split('\n');

for(var line = 0; line < lines.length; line++){
console.log(lines[line]);
ImageNameList.push(lines[line]);
document.getElementById("test").innerHTML = ImageNameList;
}
};
reader.readAsText(file);
};

function displayAllImages() {
var i = 0,
len = ImageNameList.length;
for (; i < ImageNameList.length; i++) {

var img = new Image();
img.url = ImageNameList[i];
img.style.width = '160px';
img.style.height = '120px';

document.getElementById('images').appendChild(img);
}
};

HTML

<!DOCTYPE html>

<html>
<head>

<title>Test</title>
</head>

<body>

<input type="file" name="file" id="file">
<div id="test"></div>

<div id="container">

<div class="ImageNameList">
<ul id="images"></ul>
</div>
</div>

<script type="text/javascript" src= "Functions.js"></script>
</body>
</html>

最佳答案

建议您将txt文件改为json文件,以便客户端可以解析。

{
"filenames": ["1.jpg", "2.jpg"]
}

然后您可以使用 xhr 请求加载 json 文件并使用 JSON.parse 解析响应正文。

希望这有帮助。如果需要,我可以在不打电话时提供更完整的示例。

关于javascript - 使用文件名从本地目录加载多个图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41383932/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com