Máy chủ có thể được cấu hình để hiển thị nội dung của thư mục không có tệp chỉ mục để hiển thị. Kết quả thường kém ngoạn mục về mặt hình ảnh:
Chúng tôi có thể tự kiểm soát điều này bằng cách sao chép chức năng này với PHP.
- Tạo một tệp chỉ mục (
.index.phpthực sự bắt đầu bằng dấu chấm) đọc các tệp trong thư mục và xuất chúng thành một bảng - Tạo một
.htaccesstệp phục vụ tệp đó làm chỉ mục - Tải tệp chỉ mục trong CSS và các tài nguyên khác cũng có tiền tố là dấu chấm (ẩn)
PHP sau đây đọc thư mục các tệp và hiển thị một bảng được tạo kiểu về tên, loại tệp và kích thước tệp của chúng. Nó cũng áp dụng một tên lớp để áp dụng các biểu tượng cho các loại tệp chính khác nhau (xem 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
Các tài nguyên được tải trong tệp chỉ mục đó là tập lệnh sắp xếp bảng hàng đầu sortable.js và tệp .style.css. (Hãy nhớ rằng, việc mở đầu các tệp bằng một dấu chấm sẽ làm cho tệp ẩn trong hầu hết các hệ điều hành và cũng sẽ không hiển thị trong thư mục tệp của bạn (tốt)). Đây là 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); )Xem tệp tải xuống demo
HÃY NHỚ: Tệp .zip có thể trống, nhưng không phải vậy. Tất cả các tệp đều được mở đầu bằng dấu chấm. Xem chúng trong trình chỉnh sửa tệp để hiển thị cho bạn các tệp “ẩn”.
Đặc biệt cảm ơn Cliff White.
Cập nhật tháng 11 năm 2012: Các tệp demo và tệp có thể tải xuống đã được cập nhật lên (1) hiển thị nhiều kích thước tệp có thể đọc được của con người hơn (2) có các trang lỗi