Серверы можно настроить для отображения содержимого каталога, в котором нет индексного файла для отображения. Результат обычно менее чем визуально впечатляющий:
Мы можем контролировать это сами, реплицируя эту функциональность с помощью PHP.
- Создайте индексный файл (
.index.phpдействительно, начиная с точки), который считывает файлы в каталоге и выводит их в таблицу - Создайте
.htaccessфайл, который будет использовать этот файл в качестве индекса - Загрузите индексный файл в CSS и другие ресурсы, которые также имеют префикс с точкой (скрыт)
Следующий PHP считывает каталог файлов и отображает стилизованную таблицу с их именем, типом и размером файла. Он также применяет имя класса, в котором применяются значки для различных основных типов файлов (см. CSS).
Directory Contents "; $class="dir"; ) else ( $class="file"; ) // Cleans up . and… directories if($name==".")($name=". (Current Directory)"; $extn=" ";) if($name=="… ")($name="… (Parent Directory)"; $extn=" ";) // Print 'em print(" "; $size=" "); ) ) ?>
Filename Type Size (bytes) Date Modified
$name $extn $size $modtime
Ресурсы, загруженные в этот индексный файл, - это сценарий сортировщика таблиц, расположенный сверху, sortable.js и файл .style.css. (Помните, что установка точки перед файлами делает их невидимыми в большинстве операционных систем, а также не будет отображаться в вашем каталоге файлов (хорошо)). Вот этот CSS:
* ( padding:0; margin:0; ) body ( color: #333; font: 14px Sans-Serif; padding: 50px; background: #eee; ) h1 ( text-align: center; padding: 20px 0 12px 0; margin: 0; ) h2 ( font-size: 16px; text-align: center; padding: 0 0 12px 0; ) #container ( box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5); position: relative; background: white; ) table ( background-color: #F3F3F3; border-collapse: collapse; width: 100%; margin: 15px 0; ) th ( background-color: #FE4902; color: #FFF; cursor: pointer; padding: 5px 10px; ) th small ( font-size: 9px; ) td, th ( text-align: left; ) a ( text-decoration: none; ) td a ( color: #663300; display: block; padding: 5px 10px; ) th a ( padding-left: 0 ) td:first-of-type a ( background: url(./.images/file.png.webp) no-repeat 10px 50%; padding-left: 35px; ) th:first-of-type ( padding-left: 35px; ) td:not(:first-of-type) a ( background-image: none !important; ) tr:nth-of-type(odd) ( background-color: #E6E6E6; ) tr:hover td ( background-color:#CACACA; ) tr:hover td a ( color: #000; ) /* icons for file types (icons by famfamfam) */ /* images */ table tr td:first-of-type a(href$=".jpg.webp"), table tr td:first-of-type a(href$=".png.webp"), table tr td:first-of-type a(href$=".gif"), table tr td:first-of-type a(href$=".svg"), table tr td:first-of-type a(href$=".jpeg.webp") ( background-image: url(./.images/image.png.webp); ) /* zips */ table tr td:first-of-type a(href$=".zip") ( background-image: url(./.images/zip.png.webp); ) /* css */ table tr td:first-of-type a(href$=".css") ( background-image: url(./.images/css.png.webp); ) /* docs */ table tr td:first-of-type a(href$=".doc"), table tr td:first-of-type a(href$=".docx"), table tr td:first-of-type a(href$=".ppt"), table tr td:first-of-type a(href$=".pptx"), table tr td:first-of-type a(href$=".pps"), table tr td:first-of-type a(href$=".ppsx"), table tr td:first-of-type a(href$=".xls"), table tr td:first-of-type a(href$=".xlsx") ( background-image: url(./.images/office.png.webp) ) /* videos */ table tr td:first-of-type a(href$=".avi"), table tr td:first-of-type a(href$=".wmv"), table tr td:first-of-type a(href$=".mp4"), table tr td:first-of-type a(href$=".mov"), table tr td:first-of-type a(href$=".m4a") ( background-image: url(./.images/video.png.webp); ) /* audio */ table tr td:first-of-type a(href$=".mp3"), table tr td:first-of-type a(href$=".ogg"), table tr td:first-of-type a(href$=".aac"), table tr td:first-of-type a(href$=".wma") ( background-image: url(./.images/audio.png.webp); ) /* web pages */ table tr td:first-of-type a(href$=".html"), table tr td:first-of-type a(href$=".htm"), table tr td:first-of-type a(href$=".xml") ( background-image: url(./.images/xml.png.webp); ) table tr td:first-of-type a(href$=".php") ( background-image: url(./.images/php.png.webp); ) table tr td:first-of-type a(href$=".js") ( background-image: url(./.images/script.png.webp); ) /* directories */ table tr.dir td:first-of-type a ( background-image: url(./.images/folder.png.webp); )Просмотр файлов демо-загрузки
ПОМНИТЕ: файл .zip может показаться пустым, но это не так. Все файлы начинаются с точки. Просмотрите их в редакторе файлов, который показывает вам «скрытые» файлы.
Особая благодарность Клиффу Уайту.
Обновление, ноябрь 2012 г .: демонстрационные и загружаемые файлы были обновлены, чтобы (1) отображать более удобочитаемые размеры файлов (2) иметь страницы с ошибками