PHP端：获取文件列表
首先，我们需要使用php来读取指定目录下的所有文件名。以下是一个简单的示例代码，展示了如何使用opendir、readdir和closedir函数来实现这个功能。
<?php
$files = [];
$directory = 'C:\xampp\htdocs\dump\uploads'; // 替换为你的目录路径
if ($handle = opendir($directory)) {
while (false !== ($entry = readdir($handle))) {
if ($entry != "." && $entry != "..") {
$files[] = $entry;
}
}
closedir($handle);
} else {
echo "无法打开目录";
}
// 输出文件列表，方便调试
print_r($files);
?>代码解释：
立即学习“PHP免费学习笔记（深入）”；
- $files = [];：初始化一个空数组，用于存储文件名。
- $directory = 'C:\xampp\htdocs\dump\uploads';：指定要读取的目录路径。请根据你的实际情况修改此路径。
- opendir($directory)：打开指定目录，返回一个目录句柄。
- readdir($handle)：从目录句柄中读取一个条目，可以是文件或子目录。
- $entry != "." && $entry != ".."：过滤掉当前目录(.)和父目录(..)。
- $files[] = $entry;：将读取到的文件名添加到$files数组中。
- closedir($handle)：关闭目录句柄，释放资源。
- print_r($files);：打印文件列表，用于调试。
注意事项：
- 请确保PHP有权限访问指定的目录。
- 目录路径需要使用双反斜杠(\)或者正斜杠(/)。
将PHP数组传递到JavaScript
接下来，我们需要将PHP获取到的文件列表传递到JavaScript中。一种常用的方法是使用json_encode函数将PHP数组转换为JSON字符串，然后在JavaScript中解析该字符串。
<script type="text/javascript">
const files = JSON.parse(<?php echo "'".json_encode($files)."'"; ?>);
console.log('myFiles', files);
</script>代码解释：
立即学习“PHP免费学习笔记（深入）”；
- json_encode($files)：将PHP数组$files转换为JSON字符串。
- echo "'".json_encode($files)."'";：将JSON字符串输出到HTML页面中，并用单引号包裹，防止JavaScript解析错误。
- JSON.parse()：在JavaScript中使用JSON.parse()函数解析JSON字符串，将其转换为JavaScript数组。
- console.log('myFiles', files);：将文件列表打印到控制台，方便调试。
另一种方法：
也可以直接将JSON数据嵌入到HTML的data属性中，然后在JavaScript中读取：
<div id="file-list" data-files='<?php echo json_encode($files); ?>'></div>
<script>
const fileListElement = document.getElementById('file-list');
const files = JSON.parse(fileListElement.dataset.files);
console.log('Files from data attribute:', files);
</script>这种方式更清晰，避免了在script标签中直接输出PHP变量。
JavaScript端：使用文件列表
现在，我们已经成功地将PHP获取到的文件列表传递到了JavaScript中。可以在JavaScript中使用这些文件名进行各种操作，例如动态生成列表、过滤文件等等。
// 示例：动态生成文件列表
const fileListContainer = document.getElementById('file-list-container');
files.forEach(file => {
const listItem = document.createElement('li');
listItem.textContent = file;
fileListContainer.appendChild(listItem);
});代码解释：
立即学习“PHP免费学习笔记（深入）”；
- document.getElementById('file-list-container')：获取用于显示文件列表的HTML元素。
- files.forEach(file => { ... });：遍历文件列表数组。
- document.createElement('li')：创建一个新的li元素。
- listItem.textContent = file;：设置li元素的文本内容为文件名。
- fileListContainer.appendChild(listItem)：将li元素添加到文件列表容器中。
总结：
通过以上步骤，我们成功地实现了使用PHP获取目录文件列表，并将这些文件名传递到JavaScript中进行使用的功能。这种方法可以应用于各种需要动态加载文件列表的场景，例如图片库、文件管理系统等等。请注意，安全性是至关重要的，务必对用户上传的文件进行验证和过滤，防止恶意代码注入。
