We Keep Coding

Working solution to get file names inside server folder

I've used multiple solutions here on Stackoverflow but I can't make any of them work properly (Nodejs is not accepted).
I have a path filled with mp3 files and I want to return the file names.
The lasted thing I tried was this:
in the getFiles folder of my server, I have a PHP file named files.php and a JS file named scripts.js and index.html
PHP code:
<?php
$dir = 'mysite/folderOf/audio/';
// Store the scandir results in a variable
$files = scandir($dir);
// Encode the array in JSON and echo it
echo json_encode($files);
?>
Javascript:
$.get( "files.php", function( data ) {
console.log(data);
});
The directory where the mp3 files exist is: mysite/folderOf/audio/
The result of the code above is:
I need to return an array with filenames of mysite/folderOf/audio/ directory.

try this if it works
<?php
// open this directory
$Directory = opendir('mysite/folderOf/audio');
// get each entry
while($entryName = readdir($Directory)) {
$fileArray[] = $entryName;
}
// close directory
closedir($Directory);
// count elements in array
sort($fileArray);
$indexCount = count($fileArray);
// loop through the array of files and print them all in a list
for($index=0; $index < $indexCount; $index++) {
$extension = substr($fileArray[$index], -3);
if ($extension == 'mp3'){
echo '<a class="iconMP3" href="mysite/folderOf/audio/' . $fileArray[$index] . '"/>' . $fileArray[$index] . '</a>';
}
}
?>

PHP breadcrumbs with list of paths

I have a breadcrumbs script that divides the URL with /and links each one to the same path. However, I am facing two issues:
I have an older website which didn't have index.php in many
folders, so I need to add an array for which file to go to for that folder.
Some folders could have the same name in different locations.. so there could be a path like example.com/something/Samename, and another like example.com/another/path/Samename, and I need to set the title that shows in the breadcrumbs, so it's meaningful more than the path names.
So I want to add something like an array to tell it if the path is /another/path/Samename link to thisfile.php, and if it is the other folder link to another file.. etc., and if there is no array for that path then it links normally to the foldername, which means it has index.php file.
My current script is:
var path = "";
var href = document.location.href;
var s = href.split("/");
for (var i=2;i<(s.length-1);i++) {
path+=""+s[i]+" / ";
}
i=s.length-1;
path+=""+s[i]+"";
var url = window.location.protocol + "//" + path;
document.writeln(url);
//-->
And this another script that does the same:
//this is a file named 'functions.php'
<?php
function breadcrumbs(){
$bread = explode('/', $_SERVER['PHP_SELF']);
$url = '/';
$returnString = "<span class='bc0'><a href='$url'>home</a>";
for($i=1;$i<count($bread)-1;$i++){
$url.=$bread[$i].'/';
$returnString .= " |</span> <span class='bc$i'><a href='$url'>$bread[$i]</a>";
}
echo $returnString.'</span>';
}
?>
//in header of path
<?php include ( $_SERVER['DOCUMENT_ROOT'] . 'functions.php'); ?>
//where the breadcrumbs show
<?php breadcrumbs(); ?>

How to make a slideshow banner in html?

I want to make my banner changed automatically just like a slideshow. The banner I took from a folder and it can read all banner in that folder and display it on a website automatically changes. I already make it to read all banner and display it on the website, but it kind of random image, not changed except if I reload the page. This the code:
<?php
$imglist='';
//$img_folder is the variable that holds the path to the banner images.
// see that you dont forget about the "/" at the end
$img_folder = "images/";
mt_srand( (double)microtime()*1000 );
//use the directory class
$imgs = dir($img_folder);
//read all files from the directory, checks if are images and ads them to a list (see below how to display flash banners)
while ( $file = $imgs->read() )
{
if (eregi("gif", $file) || eregi("jpg", $file) || eregi("png", $file))
$imglist .= "$file ";
}
closedir($imgs->handle);
//put all images into an array
$imglist = explode(" ", $imglist); $no = sizeof($imglist)-2;
//generate a random number between 0 and the number of images
$random = mt_rand(0, $no); $image = $imglist[$random];
//display image
echo '<img class="img-responsive" src="'.$img_folder.$image.'" border=0>';
?>
And how to make that PHP into HTML? if I change the extention into html, the banner div show the code not the images. Thanks.

The psuedocode for what you're doing would go something like:
load images from a directory into an array
on page load select a random image from image array
display first image
every X seconds display another image from image array
to display properly, your php file needs to be loaded/served from a web server. To do this, deploy your php file to your web server and then test it out.
an example of a banner I created a few years agao, that is similar to what you are after, is here

First, make your PHP echo out a hidden <input> element, with value containing the JSON string of image paths. Using your code, something like:
<?php
$out = " /* Beginning of your page code */ "
$imgJSON = json_encode($imglist);
$out .= '<input id="bans" type="hidden" value="' .$imgJSON. '" />';
$out .= " /* Rest of your page code */ "
echo $out;
die();
Then, you can use the example below to swap the images in the banner div. I demonstrate a very simple animation, just to show how it is done.
jsFiddle Demo
HTML:
<!-- Not req if you echoed out a hidden input via PHP:
<input type="hidden" id="bans" value='["300/49","300/51","297/50","298/51"]' />
-->
<div id="banner"></div>
javascript/jQuery:
var i = $('#bans').val();
var j = JSON.parse(i);
var max = j.length - 1;
var cnt = 0;
var timerId = null;
function swapBannersTimer() {
doSwap();
timerId = setTimeout(swapBannersTimer, 3000);
}
function doSwap(){
var str = 'http://placekitten.com/' + j[cnt];
$('#banner')
.html('<img class="far_right" src="'+str+'" />')
.promise()
.done(function(){
$('img').animate({
marginLeft: '0px'
},500);
});
cnt = (cnt < max) ? cnt+1 : 0;
}
swapBannersTimer();
**CSS:*
#banner{width:300px;height:52px;overflow:hidden;}
.far_right{margin-left:300px;}
NOTE: Because this example uses the jQuery library, you must include it on your page -- usually between the DIV tags, like this:
<head>
<!-- other stuff in head -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
If you use a CDN to load jQuery, as in the above example, it is probably already be pre-loaded from other websites.
If you want some fast lessons on jQuery, find free video tuts here:
https://www.thenewboston.com/videos.php?cat=32
or at
https://phpacademy.org/videos/jquery-basics

get all images in an array from directory and sub-directories

Currently I've similar to the following tree structure:
+images
+sub-directory
-image1.jpg
-image2.jpg
+sub-directory-2
-image3.jpg
-image4.jpg
-some-image.jpg
-another.jpg
<script>
<?php
//path to directory to scan. i have included a wildcard for a subdirectory
$directory = "images/*/";
//get all image files with a .jpg extension.
$images = glob("" . $directory . "*.jpg");
$imgs = '';
// create array
foreach($images as $image){ $imgs[] = "$image"; }
echo "var allImages = ".$imgs.";\n";
?>
console.log(allImages);
</script>
As I'm extremely new to php, I'm blindly getting logged as Array() in the console.
Also, I've set $directory = "images/*/"; which will get all images inside the subfolders only but not getting images inside parent directory that likely to images/some-image.jpg and I wanted to get this too.
I want all the images in an array like this (when I use console.log(allImages);):
['some-image.jpg','another.jpg','image1.jpg','image2.jpg','image3.jpg','image4.jpg']

I love JSON, keeps things nice and simple:
<?php
$images = glob("images/*/*.jpg");
$imgs = array();
foreach($images as $image){ $imgs[] = $image; }
?>
<script>
var allImages = JSON.parse('<?php echo json_encode($imgs);?>');
console.log( allImages);
</script>
Now you have the php array available in javascript, with the same structure. You can loop them with a for, of if you have jQuery, $.each().
I changed a code more to your style (mixing php and html), but you should try to split those in htmltemplates.
Im not 100% sure about this, but you can regex in your glob, if this works you don't need the foreach, this will return only the filenames:
$images = glob("~(?:images/*/)*\.jpg~");

What about this:
<script>
<?php
$directory = "images/*/";
$images = glob("" . $directory . "*.jpg");
echo "var allImages = ['".implode("', '", $images)."'];\n";
?>
console.log(allImages);
</script>

How about a recursive function?
function loadImages($folder)
{
$files = glob($folder);
foreach( $files as $file )
{
if(is_dir($file))
{
loadImages($file);
} else {
$images[] = $file; // add some file type validation here
}
}
return $images;
}
$images = json_encode(loadImages($startFolderPath));
I'm on an iPad so I can't test it.

How to avoid cross mark symbol when there is no source in image tag (src=" " )

I have two images, one with source src=" www.png" another with no source src="". The image with no source is showing a symbol (I don't know symbol), how can I avoid this?

Use a transparent blank placeholder PNG, or better yet, don't add useless empty images to your document. If you need to programmatically set the src to a non-empty value later, you can append a new <img> element at that point.

You can use transparent base64 encoded GIF image:
<img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />

There are numerous ways to "fix" this.
You can either set a php function like this:
<?php
function printSrc( $path )
{
$missingImage = 'missing_image.png';
if( ! file_exists( $path ) )
{
$path = $missingImage;
}
echo $path;
}
?>
<?php $imagePath = 'image.png'; ?>
<img src="<?php printSrc( $imagePath ) ?>"/>
This would show your "missing image" image instead of just nothing when you don't have anything to display.
You could also do
<img src="image.php?file=image.png"/>
And that image.php would have the same conditional and output an image with php.
There are also css hacks and tweaks others mentioned.

<?php
$image = "imageurl";
if(!file_exists($image){
echo ' <img alt="" />';
}else {
echo '<img src="' . $image . '"/>