Javascript 如何在UI中查看目录文件

我有一个目录，我读取其中的所有文件。 但我需要一种查看文件内容的方法。 例如：如果文件是图像，则显示图像；如果文件是文本或pdf，则显示文本，等等。 这是我从文件夹中读取文件的代码：

$main_dir = "directories/{$user->email}";
                chdir($main_dir);
                $dh = opendir('.');
                while ($file = readdir($dh)) {
                    if ($file != "." && $file != "..") { ?>
                        <tr id="soso">
                            <td class="file-name">
                                <?php
                                if (filetype($file) === 'dir') { ?>
                                    <a href="<?php echo $main_dir . "/" . $file ?>" target="_blank"><i class="far fa-folder"></i><?php echo $file ?></a>
                                <?php
                                } else {
                                ?>
                                    <a href="<?php echo $main_dir . "/" . $file ?>" target="_blank"><?php echo $file ?></a>
                                    <em><?php echo $file ?></em>
                                <?php
                                }
                                ?>
                            </td>
                            <td class="extension">
                                <?php
                                $path = pathinfo($file);
                                if (filetype($file) === 'dir') {
                                    echo 'folder';
                                } else {
                                    echo $path['extension'];
                                }
                                ?>
                            </td>
                            <td class="date">
                                <?php echo date("F d Y H:i:s.", filectime($file)) ?>
                            </td>
                            <td class="manage">
                                <span class="view" data-toggle="modal" data-target="#view-file-modal" data-file="<?php echo $file ?>"><i class="fas fa-eye"></i></span>
                                <form action="classes/deleteFile.php" method="POST">
                                    <input type="hidden" name="fileName" value="<?php echo $file ?>">
                                    <button type="submit" name="deleteFile" class="delete"><i class="far fa-trash-alt"></i></button>
                                </form>
                            </td>
                        </tr>
                <?php
                    }
                }
                closedir($dh);
                ?>

$main_dir=“directories/{$user->email}”；
chdir（$main_dir）；
$dh=opendir（'.'）；
而（$file=readdir（$dh））{
如果（$file！=“&&&$file！=”）{？>
看起来您正在使用引导模式。在模式中显示图像时，请替换图像的源

$('#view-file-modal').on('shown.bs.modal', function (e) {
  var $invoker = $(e.relatedTarget);
  // Use $invoker to retrieve the image url from correct element
  $('#view-image').attr("src", "someimage.jpg");
});

如果可以为其他数据类型触发模式，而不仅仅是图像，我可能会向视图按钮本身添加一个侦听器，并在设置模式内容时从那里以编程方式显示模式。
这是仅显示图像