文本查看器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片选择器</title>
    <style>
        .image-picker {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
        }
        .image-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin: 20px 0;
        }
        .image-item {
            border: 1px solid #ddd;
            padding: 5px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        .image-item:hover {
            border-color: #999;
            background: #f0f0f0;
        }
        .image-item img {
            max-width: 100%;
            height: auto;
            display: block;
            margin-bottom: 5px;
        }
        .pagination {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }
        .pagination button {
            margin: 0 5px;
            padding: 5px 10px;
            cursor: pointer;
        }
        .preview-input {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="image-picker">
        <h2>图片选择器</h2>
        <input type="text" id="imageUrl" class="preview-input" placeholder="选择的图片URL将显示在这里">
        
        <div id="imageContainer" class="image-grid"></div>
        
        <div class="pagination">
            <button id="prevPage">上一页</button>
            <span id="pageInfo">第1页/共1页</span>
            <button id="nextPage">下一页</button>
        </div>
    </div>

    <script>
        // 全局变量
        var currentPage = 1;
        var totalPages = 1;
        
        // 获取DOM元素
        var imageContainer = document.getElementById('imageContainer');
        var prevPageBtn = document.getElementById('prevPage');
        var nextPageBtn = document.getElementById('nextPage');
        var pageInfo = document.getElementById('pageInfo');
        var imageUrlInput = document.getElementById('imageUrl');
        
        // 加载图片数据
        function loadImages(page) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'image_list.php?page=' + page, true);
            
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        try {
                            var data = JSON.parse(xhr.responseText);
                            displayImages(data);
                        } catch (e) {
                            console.error('解析JSON失败:', e);
                            imageContainer.innerHTML = '<div class="error">加载图片失败</div>';
                        }
                    } else {
                        console.error('请求失败:', xhr.status);
                        imageContainer.innerHTML = '<div class="error">加载图片失败 (HTTP ' + xhr.status + ')</div>';
                    }
                }
            };
            
            xhr.send();
        }
        
        // 显示图片
        function displayImages(data) {
            imageContainer.innerHTML = '';
            
            if (data.error) {
                imageContainer.innerHTML = '<div class="error">' + data.error + '</div>';
                return;
            }
            
            currentPage = data.page;
            totalPages = data.total_pages;
            
            // 更新分页信息
            pageInfo.textContent = '第' + currentPage + '页/共' + totalPages + '页';
            prevPageBtn.disabled = (currentPage <= 1);
            nextPageBtn.disabled = (currentPage >= totalPages);
            
            // 显示图片
            if (data.images && data.images.length > 0) {
                data.images.forEach(function(image) {
                    var item = document.createElement('div');
                    item.className = 'image-item';
                    item.innerHTML = `
                        <img src="${image.url}" alt="${image.name}">
                        <div>${image.name}</div>
                    `;
                    
                    // 点击事件 - 回调图片URL到输入框
                    item.addEventListener('click', function() {
                        imageUrlInput.value = image.url;
                        // 可以在这里添加自定义回调逻辑
                        if (typeof window.imagePickerCallback === 'function') {
                            window.imagePickerCallback(image);
                        }
                    });
                    
                    imageContainer.appendChild(item);
                });
            } else {
                imageContainer.innerHTML = '<div class="no-images">没有找到图片</div>';
            }
        }
        
        // 分页按钮事件
        prevPageBtn.addEventListener('click', function() {
            if (currentPage > 1) {
                loadImages(currentPage - 1);
            }
        });
        
        nextPageBtn.addEventListener('click', function() {
            if (currentPage < totalPages) {
                loadImages(currentPage + 1);
            }
        });
        
        // 初始加载
        loadImages(1);
        
        // 全局回调函数
        window.imagePickerCallback = function(image) {
            console.log('选择了图片:', image);
            // 这里可以添加更多的回调逻辑
        };
    </script>
</body>
</html>