Question

你可以请你帮忙我这个代码吗？我想在单击按钮时填充图像列表。screenShotsList.txt包含文件名，例如：

out1.png
out2.png
out3.png
out4.png
out5.png
out6.png
out7.png
out8.png

现在，我的问题是将我的数组显示为一组图像的语法，并且当单击一个按钮时代码不起作用。

这是我到目前为止的代码..

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("button").click(function(){
var file = "C:/newbots/ctfuPoster/data/screenShotsList.txt";
function getFile(){
$.get(file,function(txt){
var lines = txt.responseText.split("\n");
for (var i = 0, len = lines.length; i < len; i++) {
// Equivalent: $(document.createElement('img'))
var img = $('<img id="dynamic">'); 
img.attr('src', lines[i]);
img.appendTo('#imagediv');
}
}); 
}
}); 
</script>

提前谢谢

Answer 1

对于此示例，您有一个带有小脚本的简单html页面

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex,nofollow" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#button").click(function(){
         $.ajax({
            url : "screen.TXT",
            dataType: "text",
            success : function (data) {
            console.log(data)
               var lines = data.split(",")
                for (var i = 0; i < lines.length; i++) {
                    var img = $('<img class="dynamic">'); 
                    img.attr('src', lines[i]);
                    img.appendTo('#imageDiv');
                }
            }
        });         
     });
})
</script>
</head>
<body>
<div id="imageDiv"></div>    
<input value="clickMe" type="button" id="button">    
</body>
</html>

对于脚本的操作，我创建了一个简单的文本文件，其结构和名称为screen.txt。此文本文件包含lorempixel.com图片的链接，必须与html页面的页面相同<登记/> screen.txt文件：

http://lorempixel.com/output/abstract-q-c-300-300-7.jpg,
http://lorempixel.com/output/abstract-q-c-300-300-9.jpg,
http://lorempixel.com/output/abstract-q-c-300-300-2.jpg

有关在线工作示例，请访问：this page

读取txt文件并将内容显示为图像javascript

1 个答案: