javascript - 使用javascript获取文件夹中的文件名

Question

1. 我有一个背景图片文件夹，里面有一些我想用作背景的图片。
2. 我怎样才能得到他们的名字并将他们放在 javascript 数组中？如果我不能用 javascript，我该怎么做？

3. 我想读取文件名并使用 javacsript 和链接更改背景图像和 CSS。

   <script>
    function  nextbg(){
   $('#bg').css('background-image','url(Images/bg2.jpg)'); 
    }
    </script>
   

Answer 1

此解决方案是根据浏览器无法访问文件夹/文件系统这一事实创建的。

Javascript 不能访问文件系统。这必须通过服务器脚本 完成，然后提供给 javascript。

我在加载所有不同的图 block 时构建游戏引擎时遇到了类似的问题。我最终这样做了。

这个解决方案在实现时确实会带来两个问题。

1. 您必须在“NrofTiles”数组中定义图像的数量
2. 图像的命名必须类似于 tile1、tile2 ... tile9，这样您就可以
   增加它们的路径。

typeOfTiles[typeCounter] 只是让我可以访问不同的文件夹，在我的例子中是我的瓷砖、草地、房屋、水等等。

for(var i = 0; i <= nrofTiles.length; i++)    
{
    for(var x = 0; x <= nrofTiles[i]; x++)
    {       
        console.log
        ("Fetching tile "+(x + 1 )+" of " + 14);
        img = new Image();
        //My path
        img.src = 'Images/Cart/' + typeOfTiles[typeCounter] + '/' + (x + 1) + '.png';
        imgArray.push(img);

            var intervalFunctionen = function () {      

                alert("calls back here");
            };

    }//end for loop!
 }end outer for loop!

当所有内容(磁贴)加载完毕后，您可以执行此操作以更改背景图片。

这是一个不断变化的 body 背景的例子。您可以使用一个 ID 建立链接，比如说“iamthelink”。

HTML

<a href="#" id="iamthelink">Change BG</a>

JavaScript

var link = document.getElementsById('iamthelink');

link.onclick= function() {
   var body = document.getElementsByTagName('body')[0];
   body.style.backgroundImage = 'url(http://localhost/background.png)';
}