如何使用 PHP 查看文件夹内的文件

Question

I have a list of files read from a directory, each file/folder has a button to view it inside modal. How can I pass exact file clicked to modal to show? Here is my code:

<?php
                $main_dir = "directories/{$user->email}";
                $active_row;
                chdir($main_dir);
                $dh = opendir('.');
                while ($file = readdir($dh)) {
                    if ($file != "." && $file != "..") { ?>
                        <tr>
                            <td class="file-name">
                                <?php
                                if (filetype($file) === 'dir') { ?>
                                    <a href="<?php echo $main_dir . "/" . $file; ?>"><i class="far fa-folder"></i><?php echo $file ?></a>
                                <?php
                                } else {
                                    echo '<span>' . $file . '</span>';
                                    echo '<em>' . $file . '</em>';
                                }
                                ?>
                            </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" <?php if (filetype($file) !== 'dir') {
                                                        echo 'id="' . $file . '"';
                                                    }
                                                    ?> data-toggle="modal" data-target="#view-file-modal"><i class="fas fa-eye"></i></span>
                                <form action="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);
                ?>

and this is the modal I have using bootstrap:

<!-- View File Modal -->
            <div class="modal fade" id="view-file-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <img src="" alt="image">
                        </div>
                    </div>
                </div>
            </div>

and This image show what I have exactly:

Finally, I know I made a mistake on viewing method I use, but It working only on images using jQuery

Answer 1

Dont use id="" use a data attribute data-file="" it wont interfere with styling etc (imagine a file called view-file-modal , it would break the modal),

Then use the modal events to get the value of data-file which will be in e.relatedTarget.dataset.file

 $('#myModal').on('show.bs.modal', function(e) { let file = e.relatedTarget.dataset.file || '' console.log(file) $(this).find('img[data-img]').attr('src', file) })

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <button type="button" id="mymodal" class="btn btn-link" data-toggle="modal" data-target="#myModal" data-file="https://i.imgur.com/RRWNchB.jpg"> Launch demo modal </button> <;-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times:</span></button> </div> <div class="modal-body"> <img class="img-fluid" data-img src="data;image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP89h8AAvEB93wyFi8AAAAASUVORK5CYII=" alt> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>