jq 目录树ajax,javascript

我正在尝试创建一种查看CSV文件的方法,该文件包含有关物理驱动器上的文件夹和子文件夹的详细信息。

这是CSV文件:

Volume,Path,Name,Size,Ext,Last modified,Description

"Music","/All Rock Music/All Rock Albums/Rock Album","01. Track 1.mp3",4274491,"mp3",2019-05-23 17:35:23,""

我已经使用papa parse plugin将此csv转换为javascript数组。 现在,我发现此插件可以创建用于查看文件的树形结构。 由于我不需要服务器,因此php无法运行。

在他们的github页面上,它说:

您可以创建自定义连接器脚本来扩展文件树的功能。 最简单的方法可能是修改下载中提供的脚本之一。 如果要从头开始,脚本应接受一个POST变量(dir),并以以下格式输出未排序的列表:

(additional folders here)

filename.txt

(additional files here)

请您建议不使用PHP的情况下如何使用此插件?

此外,此文件树插件还有一个替代方案。请在此处查看

它要求我的html结构为:

  • Root node 1
    • Child node 1
    • Child node 2
  • Root node 2

我的file_data_array是: data[i][1]其中

data是目录/子目录中所有文件的数组。

i是迭代器。

1是此csv标头中的文件路径:

体积,

小路,

名称,

尺寸,

分机号

最后修改,

描述

知道如何使用上述数组使用jstree创建带有目录及其文件和子目录的文件树吗?

编辑:我发现此PHP脚本在服务器端生成UL列表。 有人可以建议如何在javascript中为客户端创建相同的列表吗? 我有一个csv文件输入,因此不需要ajax请求。

代码:

ini_set('open_basedir', dirname(__FILE__) . DIRECTORY_SEPARATOR);

class fs

{

protected $base = null;

protected function real($path) {

$temp = realpath($path);

if(!$temp) { throw new Exception('Path does not exist: ' . $path); }

if($this->base && strlen($this->base)) {

if(strpos($temp, $this->base) !== 0) { throw new Exception('Path is not inside base ('.$this->base.'): ' . $temp); }

}

return $temp;

}

protected function path($id) {

$id = str_replace('/', DIRECTORY_SEPARATOR, $id);

$id = trim($id, DIRECTORY_SEPARATOR);

$id = $this->real($this->base . DIRECTORY_SEPARATOR . $id);

return $id;

}

protected function id($path) {

$path = $this->real($path);

$path = substr($path, strlen($this->base));

$path = str_replace(DIRECTORY_SEPARATOR, '/', $path);

$path = trim($path, '/');

return strlen($path) ? $path : '/';

}

public function __construct($base) {

$this->base = $this->real($base);

if(!$this->base) { throw new Exception('Base directory does not exist'); }

}

public function lst($id, $with_root = false) {

$dir = $this->path($id);

$lst = @scandir($dir);

if(!$lst) { throw new Exception('Could not list path: ' . $dir); }

$res = array();

foreach($lst as $item) {

if($item == '.' || $item == '..' || $item === null) { continue; }

$tmp = preg_match('([^ a-zа-я-_0-9.]+)ui', $item);

if($tmp === false || $tmp === 1) { continue; }

if(is_dir($dir . DIRECTORY_SEPARATOR . $item)) {

$res[] = array('text' => $item, 'children' => true, 'id' => $this->id($dir . DIRECTORY_SEPARATOR . $item), 'icon' => 'folder');

}

else {

$res[] = array('text' => $item, 'children' => false, 'id' => $this->id($dir . DIRECTORY_SEPARATOR . $item), 'type' => 'file', 'icon' => 'file file-'.substr($item, strrpos($item,'.') + 1));

}

}

if($with_root && $this->id($dir) === '/') {

$res = array(array('text' => basename($this->base), 'children' => $res, 'id' => '/', 'icon'=>'folder', 'state' => array('opened' => true, 'disabled' => true)));

}

return $res;

}

public function data($id) {

if(strpos($id, ":")) {

$id = array_map(array($this, 'id'), explode(':', $id));

return array('type'=>'multiple', 'content'=> 'Multiple selected: ' . implode(' ', $id));

}

$dir = $this->path($id);

if(is_dir($dir)) {

return array('type'=>'folder', 'content'=> $id);

}

if(is_file($dir)) {

$ext = strpos($dir, '.') !== FALSE ? substr($dir, strrpos($dir, '.') + 1) : '';

$dat = array('type' => $ext, 'content' => '');

switch($ext) {

case 'txt':

case 'text':

case 'md':

case 'js':

case 'json':

case 'css':

case 'html':

case 'htm':

case 'xml':

case 'c':

case 'cpp':

case 'h':

case 'sql':

case 'log':

case 'py':

case 'rb':

case 'htaccess':

case 'php':

$dat['content'] = file_get_contents($dir);

break;

case 'jpg':

case 'jpeg':

case 'gif':

case 'png':

case 'bmp':

$dat['content'] = 'data:'.finfo_file(finfo_open(FILEINFO_MIME_TYPE), $dir).';base64,'.base64_encode(file_get_contents($dir));

break;

default:

$dat['content'] = 'File not recognized: '.$this->id($dir);

break;

}

return $dat;

}

throw new Exception('Not a valid selection: ' . $dir);

}

public function create($id, $name, $mkdir = false) {

$dir = $this->path($id);

if(preg_match('([^ a-zа-я-_0-9.]+)ui', $name) || !strlen($name)) {

throw new Exception('Invalid name: ' . $name);

}

if($mkdir) {

mkdir($dir . DIRECTORY_SEPARATOR . $name);

}

else {

file_put_contents($dir . DIRECTORY_SEPARATOR . $name, '');

}

return array('id' => $this->id($dir . DIRECTORY_SEPARATOR . $name));

}

public function rename($id, $name) {

$dir = $this->path($id);

if($dir === $this->base) {

throw new Exception('Cannot rename root');

}

if(preg_match('([^ a-zа-я-_0-9.]+)ui', $name) || !strlen($name)) {

throw new Exception('Invalid name: ' . $name);

}

$new = explode(DIRECTORY_SEPARATOR, $dir);

array_pop($new);

array_push($new, $name);

$new = implode(DIRECTORY_SEPARATOR, $new);

if($dir !== $new) {

if(is_file($new) || is_dir($new)) { throw new Exception('Path already exists: ' . $new); }

rename($dir, $new);

}

return array('id' => $this->id($new));

}

public function remove($id) {

$dir = $this->path($id);

if($dir === $this->base) {

throw new Exception('Cannot remove root');

}

if(is_dir($dir)) {

foreach(array_diff(scandir($dir), array(".", "..")) as $f) {

$this->remove($this->id($dir . DIRECTORY_SEPARATOR . $f));

}

rmdir($dir);

}

if(is_file($dir)) {

unlink($dir);

}

return array('status' => 'OK');

}

public function move($id, $par) {

$dir = $this->path($id);

$par = $this->path($par);

$new = explode(DIRECTORY_SEPARATOR, $dir);

$new = array_pop($new);

$new = $par . DIRECTORY_SEPARATOR . $new;

rename($dir, $new);

return array('id' => $this->id($new));

}

public function copy($id, $par) {

$dir = $this->path($id);

$par = $this->path($par);

$new = explode(DIRECTORY_SEPARATOR, $dir);

$new = array_pop($new);

$new = $par . DIRECTORY_SEPARATOR . $new;

if(is_file($new) || is_dir($new)) { throw new Exception('Path already exists: ' . $new); }

if(is_dir($dir)) {

mkdir($new);

foreach(array_diff(scandir($dir), array(".", "..")) as $f) {

$this->copy($this->id($dir . DIRECTORY_SEPARATOR . $f), $this->id($new));

}

}

if(is_file($dir)) {

copy($dir, $new);

}

return array('id' => $this->id($new));

}

}

if(isset($_GET['operation'])) {

$fs = new fs(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'data' . DIRECTORY_SEPARATOR . 'root' . DIRECTORY_SEPARATOR);

try {

$rslt = null;

switch($_GET['operation']) {

case 'get_node':

$node = isset($_GET['id']) && $_GET['id'] !== '#' ? $_GET['id'] : '/';

$rslt = $fs->lst($node, (isset($_GET['id']) && $_GET['id'] === '#'));

break;

case "get_content":

$node = isset($_GET['id']) && $_GET['id'] !== '#' ? $_GET['id'] : '/';

$rslt = $fs->data($node);

break;

case 'create_node':

$node = isset($_GET['id']) && $_GET['id'] !== '#' ? $_GET['id'] : '/';

$rslt = $fs->create($node, isset($_GET['text']) ? $_GET['text'] : '', (!isset($_GET['type']) || $_GET['type'] !== 'file'));

break;

case 'rename_node':

$node = isset($_GET['id']) && $_GET['id'] !== '#' ? $_GET['id'] : '/';

$rslt = $fs->rename($node, isset($_GET['text']) ? $_GET['text'] : '');

break;

case 'delete_node':

$node = isset($_GET['id']) && $_GET['id'] !== '#' ? $_GET['id'] : '/';

$rslt = $fs->remove($node);

break;

case 'move_node':

$node = isset($_GET['id']) && $_GET['id'] !== '#' ? $_GET['id'] : '/';

$parn = isset($_GET['parent']) && $_GET['parent'] !== '#' ? $_GET['parent'] : '/';

$rslt = $fs->move($node, $parn);

break;

case 'copy_node':

$node = isset($_GET['id']) && $_GET['id'] !== '#' ? $_GET['id'] : '/';

$parn = isset($_GET['parent']) && $_GET['parent'] !== '#' ? $_GET['parent'] : '/';

$rslt = $fs->copy($node, $parn);

break;

default:

throw new Exception('Unsupported operation: ' . $_GET['operation']);

break;

}

header('Content-Type: application/json; charset=utf-8');

echo json_encode($rslt);

}

catch (Exception $e) {

header($_SERVER["SERVER_PROTOCOL"] . ' 500 Server Error');

header('Status: 500 Server Error');

echo $e->getMessage();

}

die();

}

?>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值