使用文件名加载来自本地目录的多个图像

我正在编写一个简单的网站，该网站使用包含所有这些图像名称的TXT文件在本地目录中加载多个图像。

流是该网站读取图像名称（即1.jpg）的TXT文件，然后将图像加载到网站上的相应名称。

我目前陷入困境。欢迎任何建议：）

更新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解析响应主体。

希望这会有所帮助。如果需要，我可以在不在电话上时给出一个更完整的示例。

相关内容

最新更新

热门标签：