在文件夹中显示图库中的最新图像

Question

I am saving images that are created by a user with the canvas tag into a folder on my site:

<?php 
$data = $_POST['img']; 
$data = str_replace('data:image/png;base64,','',$data);
$data = str_replace(' ', '+', $data);
$img = base64_decode($data);
$path = 'images/' . uniqid() . '.png';
if(file_put_contents($path, $img)){
print $path;
}else{
header("HTTP/1.1 500 Internal Server Error");
}
?>

and then displaying the images in a gallery:

<?php // display source code
$folder_path = 'images/';
$files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE);
foreach($files as $file){
echo '<img src="'.$file.'" />';    
}
?>

I would like the most recent images displayed at the top and if possible only to show a handful of the images at one time and have a 'show more' function that will make visible the hidden elements when clicked

Answer 1

您可以将图像的名称以及时间戳保存在数据库（例如mysql）中，并以top (number of records to be shown)和order by (timestamp column) desc查询最近的图像。

Answer 2

You'll want to sort the images in to an array first, by date, and then display them from the array like so:

$folder_path = 'images/';

$files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE);

//Images array
$images = array();

foreach($files as $key => $file) {
    //Get the modified time of the file
    $filetime = filemtime($file);

    //Add the info to an array
    $images[$key]['filepath'] = $file;
    $images[$key]['filetime'] = $filetime;
}

//Sort the array
usort($images, function($a, $b){
    return $b['filetime'] - $a['filetime'];
});

//Now you can display the images
foreach($images as $image) {
    echo '<img src="' . $image["filepath"] . '" />';
}

If you decide that you want to display them in order of oldest images first, then simply swap the $b and $a around in the usort() function, like so:

usort($images, function($a, $b){
    return $a['filetime'] - $b['filetime'];
});

See more information on usort here: http://php.net/manual/en/function.usort.php

Regarding the "Show More" button, you want to be looking at javascript / jquery and working out how to do that, it's a very broad question to be answered here I'm afraid.