当前位置：首页 > 行业动态 > 正文

C分页展示服务器指定目录图片示例，如何实现？

admin
行业动态
2025-03-02
2

在C#中，可以使用 System.IO命名空间来获取指定目录下的所有图片文件，并结合分页逻辑进行显示。以下是一个简单的示例代码：“

csharp，using System;，using System.IO;，using System.Linq;class Program，{， static void Main()， {， string directoryPath = @"C:YourImageDirectory";， int pageSize = 10; // 每页显示的图片数量， int currentPage = 1; // 当前页码 var imageFiles = Directory.GetFiles(directoryPath, ".jpg")， .Concat(Directory.GetFiles(directoryPath, ".png"))， .OrderBy(f => f)， .ToList(); int totalPages = (int)Math.Ceiling((double)imageFiles.Count / pageSize); if (currentPage > totalPages || currentPage``这段代码展示了如何从指定目录中读取所有图片文件，并根据分页参数显示当前页的图片路径。

C#分页显示服务器上指定目录下的所有图片示例

在开发过程中，有时需要在网页或应用程序中分页显示服务器上的文件，例如图片，下面是一个详细的C#示例，展示如何实现这一功能。

环境准备

确保你有一个运行中的ASP.NET Core项目，并且已经安装了必要的NuGet包。

创建控制器

我们需要创建一个控制器来处理HTTP请求和响应，在这个例子中，我们创建一个名为ImageController的控制器。

using System.Collections.Generic;
using System.IO;
using Microsoft.AspNetCore.Mvc;
using System.Linq;
namespace YourNamespace.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ImageController : ControllerBase
    {
        private readonly string _directoryPath = "path/to/your/images"; // 替换为实际路径
        private const int PageSize = 10;
        [HttpGet("paginate")]
        public IActionResult GetPaginatedImages(int page = 1)
        {
            var files = Directory.GetFiles(_directoryPath, ".jpg") // 假设只处理JPG图片
                                 .Select(file => new FileInfo(file))
                                 .OrderByDescending(f => f.LastWriteTime);
            var paginatedFiles = files.Skip((page 1)  PageSize).Take(PageSize).ToList();
            return Ok(new
            {
                TotalFiles = files.Count(),
                Page = page,
                PageSize = PageSize,
                TotalPages = (int)Math.Ceiling((double)files.Count() / PageSize),
                Files = paginatedFiles.Select(f => new { f.Name, f.FullName })
            });
        }
    }
}

前端页面（可选）

如果你希望在前端页面中展示这些图片，可以使用JavaScript和HTML来实现分页功能，以下是一个简单的例子：

C分页展示服务器指定目录图片示例，如何实现？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery</title>
</head>
<body>
    <div id="image-gallery"></div>
    <button id="prev-page">Previous</button>
    <button id="next-page">Next</button>
    <script>
        let currentPage = 1;
        const apiUrl = 'https://yourdomain.com/api/image/paginate'; // 替换为实际API URL
        const imageContainer = document.getElementById('image-gallery');
        const prevButton = document.getElementById('prev-page');
        const nextButton = document.getElementById('next-page');
        async function fetchImages(page) {
            const response = await fetch(${apiUrl}?page=${page});
            const data = await response.json();
            renderImages(data.files);
            updateButtons(data.totalPages, page);
        }
        function renderImages(files) {
            imageContainer.innerHTML = '';
            files.forEach(file => {
                const img = document.createElement('img');
                img.src = file.fullName;
                img.alt = file.name;
                imageContainer.appendChild(img);
            });
        }
        function updateButtons(totalPages, currentPage) {
            prevButton.disabled = currentPage === 1;
            nextButton.disabled = currentPage === totalPages;
        }
        prevButton.addEventListener('click', () => {
            if (currentPage > 1) {
                currentPage--;
                fetchImages(currentPage);
            }
        });
        nextButton.addEventListener('click', () => {
            currentPage++;
            fetchImages(currentPage);
        });
        window.onload = () => fetchImages(currentPage);
    </script>
</body>
</html>