基于Apache服务器的文件列表，即文件的http下载模式

很早之前，就看到过很多网站，除了本身某个地址可以显示html网页之外，其他有些网站路径下面的子路径：

http://docbook.sourceforge.net/release/website/current/

就像本地电脑中的子文件夹一样，可以以列表形式显示文件：

设置有些还可以添加对应的不同类型的文件，显示对应不同的图标：

（其实之前看到过更好的例子，但是暂时找不到了，所以只能用上面这个不是很爽的作为例子了。。。）

因此，相对于FTP服务器的下载来说，对应的就可以实现了http模式的下载。

因为直接点击对应文件，即可下载或直接在线用浏览器打开并查看文本类型的文件。

【解决过程】

1. 之前对于这些东西，一直不知道实现的原理。

后来在自己建了个wordpress的网站：crifan.com后，无意间发现，貌似“自带”的已经实现了此基本的http下载的功能了：

而且还是不知道如何实现的，不知道内部的原理是啥。

也一直想要弄个和别的那些网站一样的，带图标的，带文件日期，大小显示的效果。

2.无意间，去google搜了：

apache file list view

结果，就找到了梦寐以求的，文件列表的实现原理，原来是通过：

apache的一个模块：mod_autoindex

来实现的。

所以，剩下的事情就好办多了，只是模块的安装和配置了。

3.然后暂时去本地的基于apache的wordpress中看了看当前apache所用的模块。

找到了

httpd-2.2.19-win64httpd-2.2-x64confhttpd.conf

中的相关模块：

?

1	LoadModule autoindex_module modules/mod_autoindex.so

很明显，其当前已经启用了。

所以，前面所说的，建立好的wordpress网站，内置已经支持了文件列表显示，其实就是，wordpress所基于的apache，默认就已经打开了mod_autoindex了。

所以，剩下的，就是搞懂，如何去配置，实现对应的显示文件的修改日子，大小，图标等效果了。

4.另外，也专门测试了一下，去把该模块去掉：

?

1	#LoadModule autoindex_module modules/mod_autoindex.so

然后重启apache，再登陆某个wordpress网站下面的某个文件夹，结果就会出现HTTP 404的错误：

而开启了autoindex模块：

?

1	LoadModule autoindex_module modules/mod_autoindex.so

就可以正常显示文件列表的:

再一次证明了，文件列表的功能，就是通过autoindex控制的。

5.接着继续去配置autoindex。

把

httpd-2.2.19-win64httpd-2.2-x64confhttpd.conf

中的

?

1 2	# Fancy directory listings #Include conf/extra/httpd-autoindex.conf

改为：

?

1 2	# Fancy directory listings Include conf/extra/httpd-autoindex.conf

重启apache，效果变为：

可以看到，添加了最后修改时间，文件夹图标，大小。

只是图标暂时还没有，大小也没有显示。

6. 先去折腾图标。

在

httpd-2.2.19-win64httpd-2.2-x64icons

中找到了apache自带的N多个icon。

接着在

httpd-2.2.19-win64httpd-2.2-x64confextrahttpd-autoindex.conf

的确也找到了对应的配置：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

# We include the /icons/ alias for FancyIndexed directory listings.  If # you do not use FancyIndexing, you may comment this out. # Alias /icons/ "/httpd-2.2-x64/icons/"   <Directory "/httpd-2.2-x64/icons">     Options Indexes MultiViews     AllowOverride None     Order allow,deny     Allow from all </Directory>   # # AddIcon* directives tell the server which icon to show for different # files or filename extensions.  These are only displayed for # FancyIndexed directories. # AddIconByEncoding (CMP,/icons/compressed.gif) x-compress x-gzip   AddIconByType (TXT,/icons/text.gif) text/* AddIconByType (IMG,/icons/image2.gif) image/* AddIconByType (SND,/icons/sound2.gif) audio/* AddIconByType (VID,/icons/movie.gif) video/*   AddIcon /icons/binary.gif .bin .exe AddIcon /icons/binhex.gif .hqx AddIcon /icons/tar.gif .tar AddIcon /icons/world2.gif .wrl .wrl.gz .vrml .vrm .iv AddIcon /icons/compressed.gif .Z .z .tgz .gz .zip AddIcon /icons/a.gif .ps .ai .eps AddIcon /icons/layout.gif .html .shtml .htm .pdf AddIcon /icons/text.gif .txt AddIcon /icons/c.gif .c AddIcon /icons/p.gif .pl .py AddIcon /icons/f.gif .for AddIcon /icons/dvi.gif .dvi AddIcon /icons/uuencoded.gif .uu AddIcon /icons/script.gif .conf .sh .shar .csh .ksh .tcl AddIcon /icons/tex.gif .tex AddIcon /icons/bomb.gif core   AddIcon /icons/back.gif .. AddIcon /icons/hand.right.gif README AddIcon /icons/folder.gif ^^DIRECTORY^^ AddIcon /icons/blank.gif ^^BLANKICON^^   # # DefaultIcon is which icon to show for files which do not have an icon # explicitly set. # DefaultIcon /icons/unknown.gif

但是想要去改/icons/的Alias为自己想要的值，却不知道当前路径该写成什么。

先去试了试：

?

1 2	#Alias /icons/ "/httpd-2.2-x64/icons/" Alias /icons/ "../../../icons/"

结果还是不行。而且去看了下实际生成的结果，对应的图标的路径，都是变成了在网站主路径下面的地址了：

即，folder.gif对应地址是http://localhost/icons/folder.gif

而此处比较麻烦的是，当前apache下面的icons的路径，是www基地址，即apache下面的htdocs，所并列的地址，所以，网站的地址：

http://localhost

下面的任何子路径，都是无法访问到对应的icon图片的。

后来想了想，觉得还是把对应图标都拷贝到网站子路径下面，比较合适。

然后把icons拷贝到

httpd-2.2.19-win64httpd-2.2-x64htdocsfiles esapacheicons

然后配置再改为：

?

1 2	#Alias /icons/ "/httpd-2.2-x64/icons/" Alias /icons/ "/files/res/apache/icons/icons/"

重启apache试试效果。

7.结果却发现上述文件夹图标还是原来的地址：

http://localhost/icons/folder.gif

看起来感觉像是apache的conf中的Alias没有起作用啊。

后来网上找了apache的alias的官网介绍：

Apache模块 mod_alias

才知道：

A。原来Alias这个指令，是先要确保模块mod_alias启用了，才能有效的

B。本身Alias正常工作后，对于上述的配置

Alias /icons/ "/files/res/apache/icons/icons/"

其将/files/res/apache/icons/icons/映射为/icons/胡，那么网站上所看到的路径，也仍旧是http://localhost/icons/，所以，很明显，上面所显示出来的地址

http://localhost/icons/folder.gif

本身就是符合逻辑的。

只是自己的内部映射配置错误，导致图片没法显示的。

然后又看到一个别人的配置：

在apache配置文件中设置alias实现目录别名访问

所以就去改为：

?

1	Alias /icons/ "D:/tmp/WordPress/DevRoot/httpd-2.2.19-win64/httpd-2.2-x64/icons/"

然后再重启apache看看效果如何。

8.结果还是不行。

不过后来注意到，别人该Alias同时，也去改后面的那个Directory的，所以就又去改为：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

# We include the /icons/ alias for FancyIndexed directory listings.  If # you do not use FancyIndexing, you may comment this out. # #Alias /icons/ "/httpd-2.2-x64/icons/" Alias /icons/ "D:/tmp/WordPress/DevRoot/httpd-2.2.19-win64/httpd-2.2-x64/icons/"   #<Directory "/httpd-2.2-x64/icons"> <Directory "D:/tmp/WordPress/DevRoot/httpd-2.2.19-win64/httpd-2.2-x64/icons/">     Options Indexes MultiViews     AllowOverride None     Order allow,deny     Allow from all </Directory>

然后重启apache，最后终于图标可以正确显示了：

顺便说一句，

上述路径是windows的绝对路径，且分隔符为斜杠’/’，而不是反斜杠’’。

如果是在线的网站，服务器是linux的话，那么对应地址就该改为对应耳朵linux的路径了，比如

/xxx/xxx/httpd-2.2/icons

之类的了。

9.接着折腾文件大小的显示。

此处本以为是文件大小的显示是有问题的呢，结果无意间点击某个子文件夹，发现里面的文件的确是显示大小的：

然后才想起来，正常的逻辑也的确是：

文件夹是不显示大小的

文件是显示大小的

所以，此处关于文件大小的显示方面，本身已经可以正常工作了，无需再折腾。

另外，

httpd-2.2.19-win64httpd-2.2-x64htdocsfiles esapacheicons

也不需要了。

10.但是xml文件格式还是没有图标。

然后就去网上找常见的windows的文件图标资源。

结果是，找了很长时间，竟然没有找到windows/xp/win7等常用文件类型所对应的图标或图片。

很是无语，看来只能抽空去用软件把常见的图标都提取出来了。

不过，刚发现，暂时可以先把xml等格式，设置为txt的：

?

1	AddIcon /icons/text.gif .txt .css .xsl .xml .ini

这样至少显示出来，不会是未知类型，多少好看点。

11。另外，对于此处文件列表显示，再去优化一下。

最终的配置如下：

?

1 2	#IndexOptions FancyIndexing HTMLTable VersionSort FoldersFirst Charset=UTF-8 NameWidth=* XHTML IndexOptions FancyIndexing VersionSort FoldersFirst Charset=UTF-8 NameWidth=* XHTML

效果如下：

 

【仍存问题】

1. 希望可以在支持文件名的宽度自动扩展的同时：

NameWidth=*

另外还支持多列之间，即图标，文件名，修改时间，大小，这几列之间能够设置padding，这样使得各列更好的能够区分开来。

2.最底部，之前的apache那个说明文字变没了。

而之前是有类似于“Apache Server at www.crifan.com Port 80”的说明文字的，现在没了。

不知道怎么弄才能让其再次出现。此处好像是开启了FancyIndexing，说明文字就消失了。