Question

<!DOCTYPE html>
<html>
<div class = "Top">
<center>
<h1>
Reaper MP3
</h1>
</center>
</div>

<div class = "Middle">
<center>
<input type = "file" webkitdirectory id = "In" oninput = "LoadFiles()" value = "">

<br>

<select id = "Sel" class = "S">
</select>
</center>
</div>

<div class = "Bottom">
<center>
<audio controls src = "" id = "Plyr">
</audio>
</center>
</div>

<style>
.Top {
width: 100%; height: 50px;
background: #FF0000;
}

.Middle {
width: 100%; height: 500px;
background: #990099;
}

.S {
width: 150px; height: 25px;
}

.Bottom {
width: 100%; height: 50px;
background: #FF0000;
}
</style>

<script>
var SelectFolder = document.getElementById("In");

var Player = document.getElementById("Plyr");
var Select = document.getElementById("Sel");

var DefaultFolder = "/This PC/Music";
var NewOption = document.createElement("option");
var Info = document.createTextNode("");
NewOption.appendChild(Info);

Select.appendChild(NewOption);

function LoadFiles() {

}
</script>
</html>

我正在尝试将其添加到我可以为文件夹中的每个文件选择选项的位置。在我的情况下，文件夹的路径是“/ This PC / Music”，然后将它放到音频src =所选文件/选项的位置。有谁知道我怎么能这样做？

Answer 1

Javascript通常无法从磁盘上的文件夹中读取。如果文件夹在您的服务器上，您需要一些服务器端语言（例如PHP，ASP.NET / C＃）来查看文件夹并为您创建HTML标记。或者有一个webservice将列表返回给你的javascript（通过Ajax），然后javascript构建它 - 但在这种情况下似乎没有必要，除非有更多的东西

Answer 2

由于 ADyson 指出javascript正在客户端运行，因此您无法访问这些文件。但是你可以用php（它是服务器端）来做这件事，我会告诉你如何：

<html>
    <head></head>

    <body>
    <?php
       $dir_handle=opendir("directory_path_here");  //creates a handle of the dir
       while (false!==($file=readdir($dir_handle))) { //loop through files/folders in the dir
          echo( "<input type='checkbox' name='items[]' value='$file' />");    //show it on page after load
       }

    ?>


    </body>


</html>

这些是复选框。我看到你的代码中有一个select，你也可以使用它。在用户选择某些内容后，您可以使用ajax和jQuery来播放音乐或刷新将所选音乐发送给自己的页面（带有get或post的形式）。

为每个文件创建选项

2 个答案: