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

问题描述：

我正在写一个简单的网站，它使用包含all of these图像名称的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>

UPDATE 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>

一个小小的代码从未杀死任何人。请看看如何创建[最小，完整和可验证]（http://*.com/help/how-to-ask）示例。 – dirtydanee

您可以使用'push（）'将项目推入数组。请看看这个，因为我认为它会帮助你。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push – NewToJS

本，一旦有人解释如何做某事，请不要编辑您的问题。这正在改变问题的含义，现有的答案张贴将看起来不正确。你的问题是如何将结果放入现有的'for（）'循环的数组中。我已经解释过你可以使用'push（）'并且包含相关的资源链接。我不知道你为什么现在将它添加到你的问题源代码中。要显示这些图像，您需要遍历数组。我建议你研究基本的javascript和数组。 – NewToJS

答

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

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

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

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

这是更多的建议，应放置在评论中。这并没有回答或解决上述问题。 – NewToJS

如果可能，一个完整的例子会很好！提前致谢：） – Ben27

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

相关推荐