By: Prem Tiwari | Last Updated: | In: Freebies, Javascript & Ajax, PHP Tutorial
Today i am going to share File Browser Using PHP and Jquery with you. It is based on the jquery file script.js and a simple php script file. You can only put your file under the Files folder.
This is the 100% free & responsive filemanager based on php, css and jquery. Please the demo from before download the complete snippets.
.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <?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 )); ?> |
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
Javasrcipt, Jquery, json, PHP
