У меня есть каталог с несколькими файлами .html.
Хотел бы прочитать список файлов в список выбора и, если он выбран, отобразить файл в div.
Не испытывайте проблем с использованием jquery или чего-то еще, если это то, что требуется.
Я решил использовать чистый jQuery и ту же идею, что и выше. Это было в работе, просто заняло у меня несколько минут дольше
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>File Select and Show example</title> <script type="text/javascript" src=jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#filesList").on('change', function(){ $("#showMeTheFile").empty(); var ourFile = $(this).val(); $('#showMeTheFile').load(ourFile); }); }); </script> </head> <body> <?php $dir = "path/to/our/directory"; if (is_dir($dir)) { if ($dh = opendir($dir)) { //we need to build the select list before the while statement echo '<select id="filesList">'; while (($file = readdir($dh)) !== false) { if(filetype($dir . $file) == 'file'){ $splitFile = explode('.', $file); if($splitFile[1] = 'html'){ echo '<option value='.$file.'>'.$splitFile[0].'.'.$splitFile[1].'</option><br/>'; } } } //we also need to close it after our while statment. echo '</select>'; closedir($dh); } } ?> <div id='showMeTheFile'> </div> </body> </html>
Вы должны прочитать каталог с помощью php и заполнить список выбора, затем при изменении события выбора вы должны прочитать выбранный и показать его там, где вы хотите.
простой пример с iframe,
<?php $dir = "."; $dh = opendir($dir); echo "<select onchange='changePage(this)'>"; while (($file = readdir($dh)) !== false) { echo "<option value='$file'>$file</option>"; } closedir($dh); echo "</select>"; ?> <br /> <iframe id="f" src="" height="600" width="800" ></iframe> <script type="text/javascript"> function changePage(e) { var ifr = document.getElementById("f"); ifr.src = e.value; } </script>