Question

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

流程是网站读取图像的txt文件＆＃39;名称（即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>

Answer 1

我建议你从txt文件更改为json文件，以便客户端可以解析它。

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

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

希望这会有所帮助。如果需要，我可以在不通电话的情况下提供更完整的示例。

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

1 个答案: