基于web的文件管理/目录结构展示（ufinder、elfinder）……的心路历程

最新推荐文章于 2025-07-11 13:43:05 发布

weixin_33734785

最新推荐文章于 2025-07-11 13:43:05 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

文章标签： python json php

原文链接：https://my.oschina.net/u/2421148/blog/482526

本文探讨了如何使用JavaScript插件创建在线文件管理器，包括展示、上传、下载等基本功能。对比了treeview、zTree及elfinder等插件，并解决了中文文件名显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

要在网页做一个类似windows“我的电脑”那种文件夹文件的展示，并且能上传下载删除重命名等功能。

（一）找JS插件，读取文件夹内容，利用插件展示

1.看到几个“推荐n款xxx的好用插件”，看了两个，一个treeview，一个叫ztree。

读取文件内容的php代码是在百度知道看到的，改了一下。

function my_dir($directory)
{
	echo "<ul id='browser' class='filetree'>
			<li><span class=\"folder\">$directory</span>
				<ul>";
	$directory = iconv("utf-8","gb18030" , $directory);
	tree($directory);

	echo '</ul>
		</li>
		</ul>';


}
function tree($directory) 
{ 
	$mydir=dir($directory); 
	while($file=$mydir->read())
	{
		$filename = iconv("gb18030", "utf-8", $file);
		//目录下的文件是文件夹 
		if((is_dir("$directory/$file")) AND ($file!=".") AND ($file!=".."))
		{ 
			echo "<li><span class=\"folder\">$filename</span>
						<ul>"; 
			tree("$directory/$file"); 
			echo '</ul>
				</li>';
		}
		//文件
		elseif (($file!=".") AND ($file!=".."))
		{ 
			echo "<li><span class=\"file\">$filename</span></li>"; 
			/*echo($file);
			echo($filename);*/
		} 
	} 
	$mydir->close(); 
}

效果大概是这样：

但是只能展示，功能不足，虽然有几种样式，但不够美观。

2. zTree自带编辑、异步等功能，但是没有后台程序，放弃。

（二）在线文档编辑插件/工具/控件。

悲剧就是从这里开始的。

找了很多，

ajaxexplorer(好像叫这个名字)(后来改名叫pydio)、KODExplorer什么的，都是做好的整个系统样，不是我要找的只是插件，放弃

2.最开始的ufinder，后来兜兜转转找的elfinder，外观都是我需要的，大概是这样：

这两个基本都差不多，感觉elfinder比ufinder好看一点点，功能多一点，只需要修改语言引入的<script>和lang的值就支持中文（和各种语言）了，当然，代码也更复杂更难理解。

把特！遇到中文的文件却读不出来。

后来发现原因是我的文件是在windows系统下，它们的编码都是GBK，而代码的编码都是UTF-8，代码中的json_encode函数也只支持utf8编码。解决思路有两种，一是把所有函数参数接收参数后、返回值之前用iconv进行转码，在函数内部使用代码本身的utf8，将ufinder的init和ls函数（感觉是初始化和显示的函数）改过之后能显示中文文件夹了，想了一下，重命名、删除、新建，函数太多，改起来太累，有没有其他方法。第二种，把代码中的数据GBK编码，以为这样就跟windows统一了。但是失败了，因为json_encode只支持utf8。

于是在网上找到一个能把GBK编码成json的函数：

function ch_json_encode($data) {
   
   function ch_urlencode($data) {
       if (is_array($data) || is_object($data)) {
           foreach ($data as $k => $v) {
               if (is_scalar($v)) {
                   if (is_array($data)) {
                       $data[$k] = urlencode($v);
                   } else if (is_object($data)) {
                       $data->$k = urlencode($v);
                   }
               } else if (is_array($data)) {
                   $data[$k] = ch_urlencode($v); //µÝ¹éµ÷ÓÃ¸Ãº¯Êý
               } else if (is_object($data)) {
                   $data->$k = ch_urlencode($v);
               }
           }
       }
       return $data;
   }
   
   $ret = ch_urlencode($data);
   $ret = json_encode($ret);
   return urldecode($ret);
}

再后来，看到哪个网页说json都不支持gbk我就哭了。

迫不得已，第三种思路，想有没有其他直接支持windows下文件的插件，于是找到了elfinder。后来发现虽然它支持中文，但是windows下的GBK还是读不出文件。不过有一点比ufinder好，ufinder遇到中文文件，整个所在文件夹内所有文件都会显示不出，而elfinder只是单个文件出错。

目前，准备修改按第一种想法，改……

所以，有没有人有现成的、或者简单的解决方法啊 TT……

后续

由于这个功能是要在linux下使用的，gbk编码的文件无法读取的问题直接就忽略掉了，所以也没找到解决的方法。==

如果是在linux下使用的话，只需要修改JS的引入就可以支持中文了。再可能就是需要修改一下文件夹的权限；再然后就是对中文文件名的检查。在 http://www.oschina.net/question/921067_83470 中3楼“ywh1981”的方法有效：

elFinderVolumeDriver.class.php文件中有一句

'acceptedName' => '/^\w[\w\s\.\%\-\[\]]*$/u',

这一项是用于检查文件和目录名称的正则的，把它设置为''，对新建或者上传的文件目录名就不检查了。

这样，就结束了，linux下基本能用了。

转载于:https://my.oschina.net/u/2421148/blog/482526