Want to learn file browser with using PHP and jQuery? It is based on the simple PHP script as well as jQuery file script.js. Let's move to the code to execute this function.
HTML Code Index.html :-
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>File Browser Using PHP and Jquery</title>
<link href="assets/css/styles.css" rel="stylesheet"/>
</head>
<body>
<div class="filemanager">
<div class="search">
<input type="search" placeholder="Find a file.." />
</div>
<div class="breadcrumbs"></div>
<ul class="data"></ul>
<div class="nothingfound">
<div class="nofiles"></div>
<span>No files here.</span>
</div>
</div>
<!-- Include javascript files -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
Simple PHP Code scan.php :-
<?php
#Set the directory path
$dir = "Files";
// Run the recursive function
$response = scan($dir);
// This function scans the files folder recursively, and builds a large array
function scan($dir){
$files = array();
// Is there actually such a folder/file?
if(file_exists($dir)){
foreach(scandir($dir) as $f) {
if(!$f || $f[0] == '.') {
continue; // Ignore hidden files
}
if(is_dir($dir . '/' . $f)) {
// The path is a folder
$files[] = array(
"name" => $f,
"type" => "folder",
"path" => $dir . '/' . $f,
"items" => scan($dir . '/' . $f) // Recursively get the contents of the folder
);
}
else {
// It is a file
$files[] = array(
"name" => $f,
"type" => "file",
"path" => $dir . '/' . $f,
"size" => filesize($dir . '/' . $f) // Gets the size of this file
);
}
}
}
return $files;
}
// Output the directory listing as JSON
header('Content-type: application/json');
echo json_encode(array(
"name" => "files",
"type" => "folder",
"path" => $dir,
"items" => $response
));
?>
Reference :- http://freewebmentor.com/2014/11/file-browser-using-php-jquery.html
HTML Code Index.html :-
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>File Browser Using PHP and Jquery</title>
<link href="assets/css/styles.css" rel="stylesheet"/>
</head>
<body>
<div class="filemanager">
<div class="search">
<input type="search" placeholder="Find a file.." />
</div>
<div class="breadcrumbs"></div>
<ul class="data"></ul>
<div class="nothingfound">
<div class="nofiles"></div>
<span>No files here.</span>
</div>
</div>
<!-- Include javascript files -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
Simple PHP Code scan.php :-
<?php
#Set the directory path
$dir = "Files";
// Run the recursive function
$response = scan($dir);
// This function scans the files folder recursively, and builds a large array
function scan($dir){
$files = array();
// Is there actually such a folder/file?
if(file_exists($dir)){
foreach(scandir($dir) as $f) {
if(!$f || $f[0] == '.') {
continue; // Ignore hidden files
}
if(is_dir($dir . '/' . $f)) {
// The path is a folder
$files[] = array(
"name" => $f,
"type" => "folder",
"path" => $dir . '/' . $f,
"items" => scan($dir . '/' . $f) // Recursively get the contents of the folder
);
}
else {
// It is a file
$files[] = array(
"name" => $f,
"type" => "file",
"path" => $dir . '/' . $f,
"size" => filesize($dir . '/' . $f) // Gets the size of this file
);
}
}
}
return $files;
}
// Output the directory listing as JSON
header('Content-type: application/json');
echo json_encode(array(
"name" => "files",
"type" => "folder",
"path" => $dir,
"items" => $response
));
?>
Reference :- http://freewebmentor.com/2014/11/file-browser-using-php-jquery.html
0 comments:
Post a Comment