[SOLUCIONADO] Árbol de archivos

keine_lust · #1 (**permalink**) 24/10/2013, 17:59

Buenas noches.
Estoy haciendo un árbol de archivos. pero no me carga aparece el recuadro donde me debe aparecer el árbol de archivos, pero lo muestra en blanco, osea no me muestra el árbol de archivos.
el directorio que yo tengo se llama archivos y dentro de esa carpeta archivos me debe aparecer todo su contenido en forma de árbol.

pego mi código HTML y PHP haber si me puede ayudar a encontrar el error o lo que me hace falta.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>jQuery File Tree Demo</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		
		<style type="text/css">
			BODY,
			HTML {
				padding: 0px;
				margin: 0px;
			}
			BODY {
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: 11px;
				background: #EEE;
				padding: 15px;
			}
			
			H1 {
				font-family: Georgia, serif;
				font-size: 20px;
				font-weight: normal;
			}
			
			H2 {
				font-family: Georgia, serif;
				font-size: 16px;
				font-weight: normal;
				margin: 0px 0px 10px 0px;
			}
			
			.example {
				float: left;
				margin: 15px;
			}
			
			.demo {
				width: 200px;
				height: 400px;
				border-top: solid 1px #BBB;
				border-left: solid 1px #BBB;
				border-bottom: solid 1px #FFF;
				border-right: solid 1px #FFF;
				background: #FFF;
				overflow: scroll;
				padding: 5px;
			}
			
		</style>
		
		<script src="js/jquery.js" type="text/javascript"></script>
		<script src="js/jquery.easing.js" type="text/javascript"></script>
		<script src="js/jqueryFileTree.js" type="text/javascript"></script>
		<link href="css/jqueryFileTree.css" rel="stylesheet" type="text/css" media="screen" />
		
		<script type="text/javascript">
			
			$(document).ready( function() {
				
				$('#fileTreeDemo_1').fileTree({ root: 'js/connectors/archivos/', script: 'js/connectors/jqueryFileTree.php' }, function(file) { 
					alert(file);
				});
				
			});
		</script>

	</head>
	
	<body>
		
		<h1>jQuery File Tree Demo</h1>

		
		<div class="example">
			<h2>Default options</h2>
			<div id="fileTreeDemo_1" class="demo"></div>
		</div>
		
	</body>
	
</html>

y el código php

Código PHP:

  
<?php 
 
$_POST['dir'] = urldecode($_POST['dir']); 
 
if( file_exists($root . $_POST['dir']) ) { 
    $files = scandir($root . $_POST['dir']); 
    natcasesort($files); 
    if( count($files) > 2 ) { /* The 2 accounts for . and .. */ 
        echo "<ul class=\"jqueryFileTree\" style=\"display: none;\">"; 
        // All dirs 
        foreach( $files as $file ) { 
            if( file_exists($root . $_POST['dir'] . $file) && $file != '.' && $file != '..' && is_dir($root . $_POST['dir'] . $file) ) { 
                echo "<li class=\"directory collapsed\"><a href=\"#\" rel=\"" . htmlentities($_POST['dir'] . $file) . "/\">" . htmlentities($file) . "</a></li>"; 
            } 
        } 
        // All files 
        foreach( $files as $file ) { 
            if( file_exists($root . $_POST['dir'] . $file) && $file != '.' && $file != '..' && !is_dir($root . $_POST['dir'] . $file) ) { 
                $ext = preg_replace('/^.*\./', '', $file); 
                echo "<li class=\"file ext_$ext\"><a href=\"#\" rel=\"" . htmlentities($_POST['dir'] . $file) . "\">" . htmlentities($file) . "</a></li>"; 
            } 
        } 
        echo "</ul>";     
    } 
} 
 
?>

espero su colaboración.
Gracias.

keine_lust · #2 (**permalink**) 25/10/2013, 08:52

Buenos dias.
ya conseguí resolver el problema.
ya me lista el árbol de archivos y puedo navegar por cada una de las carpetas mostrando su contenido.

acá dejo el código como yo lo edite:

código HTML:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>jQuery File Tree Demo</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		
		<style type="text/css">
			BODY,
			HTML {
				padding: 0px;
				margin: 0px;
			}
			BODY {
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: 11px;
				background: #EEE;
				padding: 15px;
			}
			
			H1 {
				font-family: Georgia, serif;
				font-size: 20px;
				font-weight: normal;
			}
			
			H2 {
				font-family: Georgia, serif;
				font-size: 16px;
				font-weight: normal;
				margin: 0px 0px 10px 0px;
			}
			
			.example {
				float: left;
				margin: 15px;
			}
			
			.demo {
				width: 200px;
				height: 400px;
				border-top: solid 1px #BBB;
				border-left: solid 1px #BBB;
				border-bottom: solid 1px #FFF;
				border-right: solid 1px #FFF;
				background: #FFF;
				overflow: scroll;
				padding: 5px;
			}
			
		</style>
		
		<script src="js/jquery.js" type="text/javascript"></script>
		<script src="js/jquery.easing.js" type="text/javascript"></script>
		<script src="js/jqueryFileTree.js" type="text/javascript"></script>
		<link href="css/jqueryFileTree.css" rel="stylesheet" type="text/css" media="screen" />
		
		<script type="text/javascript">
			
			$(document).ready( function() {

	                             //aca quite el root osea la dirección y la puse en el php.			
				$('#fileTreeDemo_1').fileTree({ script: 'jqueryFileTree.php', expandable: true }, function(file) { 
					alert(file);
					
					window.open(file); // este se supone que es para abrir o                 descargar el archivo. pero cuando le doy sobre el archivo no me lo muestra
					                   // dice que objeto no encontrado. es como si no encontrara la ruta del archivo para descargarlo.
				});   
			
				
			});
		</script>
	</head>
	
	<body>
		
		<h1>jQuery File Tree Demo</h1>

		
		<div class="example">
			<h2>Default options</h2>
			<div id="fileTreeDemo_1" class="demo"></div>
		</div>
		
	</body>
	
</html>

código PHP:

Código PHP:

  
<?php  
$_POST['dir'] = urldecode($_POST['dir']);  
 
if( file_exists($root = 'archivos') ) {                 //esta linea fue la que edite 
        $files = scandir($root . $_POST['dir']);  
        natcasesort($files);  
        if( count($files) > 2 ) { /* The 2 accounts for . and .. */  
                echo "<ul class=\"jqueryFileTree\" style=\"display: none;\">";  
                // All dirs  
                foreach( $files as $file ) {  
                        if( file_exists($root . $_POST['dir'] . $file) && $file != '.' && $file != '..' && is_dir($root . $_POST['dir'] . $file) ) {  
                                echo "<li class=\"directory collapsed\"><a href=\"#\" rel=\"" . htmlentities($_POST['dir'] . $file) . "/\">" . htmlentities($file) . "</a></li>";  
                        }  
                }  
                // All files  
                foreach( $files as $file ) {  
                        if( file_exists($root . $_POST['dir'] . $file) && $file != '.' && $file != '..' && !is_dir($root . $_POST['dir'] . $file) ) {  
                                $ext = preg_replace('/^.*\./', '', $file);  
                                echo "<li class=\"file ext_$ext\"><a href=\"#\" rel=\"" . htmlentities($_POST['dir'] . $file) . "\">" . htmlentities($file) . "</a></li>";  
                        }  
                }  
                echo "</ul>";  
        }  
}  
 
 
?>

pero ahora tengo otro problema. es que yo quiero poder abrir o descargar los archivos y poderlos visualizar. y se supone que se hace con window.open(file); pero no me sale me dice que no encuentra la dirección. file yo creo que es la ruta del directorio. hay tengo la duda. por favor necesito que me ayuden con esto.
Gracias

keine_lust · #3 (**permalink**) 25/10/2013, 09:36

listo ya pude solucionar el problema de poder abrir o descargar los archivos.

lo que me faltaba agregarle al window.open era ponerle la ruta el nombre del directorio donde se encontraba el archivo:

el window.open se encuentra en el html que subi anteriormente.
pongo el pedazo a continuación que faltaba para que editen el window.open :

Código HTML:

window.open('archivos' + file);  //archivos es la carpeta principal del albol de archivos

doy este tema como solucionado.