能否实现HTML本地/局域网图片文件夹浏览及列表展示功能？

Great question! Let's walk through how to build this feature while navigating browser security constraints—since that's the biggest hurdle when working with local/network files.

Browsers block direct, unprompted access to local or network folder paths for security reasons (to prevent malicious sites from sifting through your files). However, modern Chromium-based browsers (Chrome, Edge, Opera) support the File System Access API, which lets users explicitly grant permission to access a specific folder—this is the key to making your idea work.

Here's a complete working example that covers all your requirements: folder selection (including network shares), image filtering, list display with metadata, and click-to-preview functionality.

<!DOCTYPE html>
<html>
<head>
    <title>Network & Local Image Browser</title>
    <style>
        .container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 0 1rem;
        }
        #browseBtn {
            padding: 0.8rem 1.2rem;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
        }
        #browseBtn:hover {
            background: #0056b3;
        }
        .image-list {
            margin: 2rem 0;
            border: 1px solid #eee;
            border-radius: 4px;
            max-height: 400px;
            overflow-y: auto;
        }
        .image-item {
            padding: 1rem;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
        .image-item:last-child {
            border-bottom: none;
        }
        .image-item:hover {
            background-color: #f8f9fa;
        }
        .image-preview {
            padding: 1rem;
            border: 1px solid #eee;
            border-radius: 4px;
            text-align: center;
        }
        #previewImg {
            max-width: 100%;
            max-height: 400px;
            margin: 1rem 0;
            display: none;
        }
        .image-details {
            text-align: left;
            margin-top: 1rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <button id="browseBtn">Browse for Image Folder</button>
        <div class="image-list" id="imageList"></div>
        <div class="image-preview">
            <p>Select an image from the list to preview</p>
            <img id="previewImg" />
            <div class="image-details" id="imageDetails"></div>
        </div>
    </div>

    <script>
        const browseBtn = document.getElementById('browseBtn');
        const imageList = document.getElementById('imageList');
        const previewImg = document.getElementById('previewImg');
        const imageDetails = document.getElementById('imageDetails');

        browseBtn.addEventListener('click', async () => {
            try {
                // Trigger system folder picker (works with network shares too!)
                const dirHandle = await window.showDirectoryPicker();
                const imageEntries = [];

                // Iterate through all files in the selected folder
                for await (const entry of dirHandle.values()) {
                    if (entry.kind === 'file') {
                        const fileExt = entry.name.toLowerCase().split('.').pop();
                        // Filter for PNG/JPEG/JPG files
                        if (['png', 'jpeg', 'jpg'].includes(fileExt)) {
                            const file = await entry.getFile();
                            // Get creation/modification time (browser-dependent)
                            const timestamp = file.lastModifiedDate || new Date(file.lastModified);
                            imageEntries.push({
                                name: entry.name,
                                timestamp: timestamp.toLocaleString(),
                                file: file,
                                size: (file.size / 1024 / 1024).toFixed(2) // Convert to MB
                            });
                        }
                    }
                }

                // Render the filtered image list
                renderImageList(imageEntries);

            } catch (err) {
                console.error('Folder access error:', err);
                alert('Failed to access the folder. Please check permissions or try again.');
            }
        });

        function renderImageList(images) {
            imageList.innerHTML = '';
            if (images.length === 0) {
                imageList.innerHTML = '<p style="padding: 1rem;">No PNG/JPEG images found in the selected folder.</p>';
                return;
            }

            images.forEach(img => {
                const item = document.createElement('div');
                item.className = 'image-item';
                item.innerHTML = `
                    <h4>${img.name}</h4>
                    <p>Created/Modified: ${img.timestamp} | Size: ${img.size} MB</p>
                `;
                // Add click handler to show preview
                item.addEventListener('click', () => showPreview(img));
                imageList.appendChild(item);
            });
        }

        function showPreview(img) {
            // Create a temporary URL for the image preview
            const objectURL = URL.createObjectURL(img.file);
            previewImg.src = objectURL;
            previewImg.style.display = 'block';

            // Update metadata details
            imageDetails.innerHTML = `
                <h3>${img.name}</h3>
                <p><strong>Timestamp:</strong> ${img.timestamp}</p>
                <p><strong>File Size:</strong> ${img.size} MB</p>
                <p><strong>Format:</strong> ${img.name.split('.').pop().toUpperCase()}</p>
            `;

            // Clean up the URL to avoid memory leaks after loading
            previewImg.onload = () => URL.revokeObjectURL(objectURL);
        }
    </script>
</body>
</html>

• Browser Support: The File System Access API works best in Chromium-based browsers (Chrome, Edge, Opera). Firefox and Safari have limited or no support for this API as of 2024.
• Network Shares: This works with LAN shared folders (like \\server\photos on Windows or SMB shares on Mac) as long as your system can access them natively—since the picker uses your OS's native file browser.
• Permissions: Users must actively click the button and select the folder; browsers won't grant access automatically. Permissions reset when you refresh the page, so users will need to re-select the folder if they reload.
• File Metadata: Browsers can't always access the exact "creation time" of a file (depends on the OS and file system). The example uses lastModifiedDate/lastModified as a reliable fallback.

内容的提问来源于stack exchange，提问作者usernameon