这是最近花了一周多手工马出来的，前段用了MetroUI，后台是ThinkPHP，数据库MySQL，先看看效果吧。由于项目涉及敏感词汇我就码了一下。

1.选择要上传的文件夹，上传以后默认都在根目录下。

2.看看后台管理界面的效果，实现多级目录，可以显示图片内容，返回上一级

正文：

谈到文件夹上传，应该都不觉得难，一个input框加上一个php后台就够了。但是这次的需求说起来容易，但是其实还挺难的。要把一个文件夹的文件递归上传，保存目录结构，能够在浏览器里展示出来，其实是三个过程。

【1】上传时要保存文件的相对路径。这里主要有两个问题。第一是怎样获取到路径，第二是用什么方式传到服务器。

【2】后台接受并且构成出目录结构。这里也是两个问题。第一，目录结构要怎么从前台post来的数据中分离出来。第二，用什么样的结构去保存，用什么样的逻辑去存储。其实这就是后台的“算法”了。

【3】让前台显示文件目录。首先考虑到如果文件很多，你不能一次性从数据库中全都select出来。然后我希望代码尽量优雅，最好和后台交互一个函数就搞定。

解决方案：

最最重要，先确定开发的浏览器环境，这里选择Chrome，2016年6月以后的版本都算比较新，没有一一去试，chrome保证功能无误，且可以移动端联调。HTML5 chrome移动设备和电脑端联调

【1】

首先定义一个能够承载文件夹的标签。webkitdirectory是这里的大杀器，这个不仅定义了文件夹上传，而且记录了文件的相对路径。

<input type="file" name="multi_upload[]" id="multi_upload" multiple webkitdirectory />

文件本身的上传，是用到了ThinkPHP的upload类，一旦你把input的files信息post给后台，只要这样几行代码就能指定目录保存了。

$upload = new \Think\Upload();// 实例化上传类
	    $upload->maxSize   =     3145728 ;// 设置附件上传大小
	    $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
	    $upload->rootPath  =     './Public/octdatabase/'; // 设置附件上传根目录
	    $upload->savePath  =     ''; // 设置附件上传（子）目录


		$targetFolder = '/Public/octdatabase/'; // Relative to the root

		$upload->saveName = array('myFun',array('__FILE__'));
	    $upload->autoSub = false;
	    // 上传文件 
	    $info = $upload->upload();

$("#btn").click(function(){
		uploadFiles($("#multi_upload")[0].files);
	});
	function uploadFiles(files){
		// Create a new HTTP requests, Form data item (data we will send to the server) and an empty string for the file paths.
		xhr = new XMLHttpRequest();
		data = http://www.mamicode.com/new FormData();>
【2】已完成：文件保存到了后台，文件相对路径传给了后台。现在处理将文件相对路径剖开成文件夹的树形结构。树形结构中每个非根节点都有一个父节点，每个叶子结点都没有孩子。所以只要记录下来每个节点的id，和父亲的id，就能存储和读取一个树形结构了。
当然这里面依旧有trick。首先考虑一下你的文件相对路径长什么样子，如这样：“images/folder1/folder2/xxx.jpg”。当然你可以dump到前台自己看看。“/”符号将每个节点隔开了，所以只要把所有这样的相对路径分离开，你就得到了每一个文件夹（文件）的名字，每一个文件夹（文件）的父亲。explode函数能够完成隔开节点，以及生成节点的功能。接下来就是一个节点一个节点地把树形结构写到数据库。
protected function insertFolderInfo(){
		//插入文件夹层级信息
		$reletivePath = explode(',',I('post.paths'));//把传到后台的paths变成数组

		$flag = true;

		foreach ($reletivePath as $key => $path) {
			$pathTree = explode('/',$path);
			$insertId = 0;
			$octFolder = M("octfolder");

			foreach ($pathTree as $key => $nodeName) {
				if ($key == 0){//舍去最高层目录
					continue;
				}

				$leaf = 0;
				if ($key == sizeof($pathTree) - 1){
					$leaf = 1;
				}
				$nodeAdd = array(
					'nodeName' 	=> $nodeName,
					'parent' 	=> $insertId,
					'leaf'		=> $leaf
				);
				$re = $octFolder->where($nodeAdd)->find();

				if (!$re){
					$insertId = $octFolder->add($nodeAdd);

					if (!$insertId){
						$flag = false;
						break;
					}
				}
				else{
					$insertId = $re['id'];
				}
			}
			if ($flag == false){
				break;
			}
		}
		return $flag;
	}
数据库表结构：



【3】树形结构也保存到了数据库。接下来从前台优雅的把它取出来。当看目录里的文件时，当前目录里的一级文件夹（文件）的父节点都是一样的，都是当前目录的id。所有只要定义一个query函数，每次显示一个id的所有孩子，事情就简单了。剩下的就是页面的更新，触发器的绑定（为了更好的操作体验）。
function query(id){
		        $.post(
		            '/bgidb/oct/octFileAjax',
		            {parent : id},
		            function(data){
		                //console.log(data);
		                if(data['wrongcode']==999){
		            		backStepId = data['backStepId'];
		                    var files = data['files'];
		                    filePanel.html(formatFiles(files));
		                    boundListener();
		                }else{
		                    alert(data['wrongmsg']);
		                }
		            },
		            "json");
		    }

后台只要根据这个parent参数去找到所有的子节点，然后传给前台，是图片的附个图片链接，然后还附上上一级目录的id以便回退就ok。前台接到了data之后，就把前端的文件夹都画出来，触发器绑好。
public function octFileAjax(){
        $WRONG_CODE = C('WRONG_CODE');
        $WRONG_MSG = C('WRONG_MSG');
        $data['wrongcode'] = $WRONG_CODE['totally_right'];

        $parent = I("post.parent", null);
        if ($parent == null){
            $data['wrongcode'] = $WRONG_CODE['query_data_invalid'];
        }
        else{
            $oF = M("octfolder");
            $cond = array(
                'parent' => $parent
            );
            $re = $oF->where($cond)->select();

            if (!$re){
                $data['wrongcode'] = $WRONG_CODE['not_exist'];
            }
            else{
                foreach ($re as $key => $file) {
                    if($file['leaf'] == 1){
                        $oct = M("oct");
                        $cond = array(
                            'name' => $file['nodename']
                        );
                        $img = $oct->field('imgsite')->where($cond)->find();
                        $re[$key]['imgsite'] = $img['imgsite'];
                    }
                }

                $data['files'] = $re;

                $oF = M("octfolder");
                $cond = array(
                    'id' => $parent
                );
                $backStepId = $oF->field('parent')->where($cond)->find();
                if (!$backStepId){
                    $data['backStepId'] = 0;
                }
                else{
                    $data['backStepId'] = $backStepId['parent'];
                }
            }
        }

        $data['wrongmsg'] = $WRONG_MSG[$data['wrongcode']];
        $this->ajaxReturn($data);
    }

完整浏览页面前端实现：这里实在不想自己画文件夹的前端了，就用了MetroUI里的图标和样式。

我自己完整实现：
<!DOCTYPE html>
<html>
<head>
	<title>OCT文件浏览系统</title>

	<link href=http://www.mamicode.com/"__PUBLIC__/metro/css/metro.min.css" rel="stylesheet">>


这个其实是一个很大的系统的一部分，其它部分也都是我一直维护的，快两年了。
最后自己对于安全方面没有做工作，因为我对这个领域没有概念，我只是在理解力范围内随手减少代码的臃肿。


（自我介绍是：我有4年Acmer经历，现在在中南大学读硕二，希望接下来弄完实验室这个项目能够自己好好准备毕业和出国材料。希望不要被困于代码，放开自己的思想好好欣赏一下这个世界。）
HTML5+PHP 实现 保存文件夹相对路径 递归上传 在线浏览