优化资源下载界面

2025-06-09 17:36:52 +08:00
parent 234fc206d5
commit c5e5cace18
7 changed files with 1032 additions and 76 deletions
@@ -1,4 +1,4 @@
-<?php /*a:2:{s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\resources\edit.php";i:1749454320;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1746849526;}*/ ?>
+<?php /*a:2:{s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\resources\edit.php";i:1749458351;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1746849526;}*/ ?>
 <!DOCTYPE html>
 <html>
 	<head>
@@ -204,28 +204,29 @@
        <div class="layui-form-item">
            <label class="layui-form-label">图片上传</label>
            <div class="layui-input-block">
-                <div class="layui-upload">
-                    <button type="button" class="layui-btn" id="imageUpload">多图片上传</button>
-                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
-                        预览图：
-                        <div class="layui-upload-list" id="imagePreview" style="display: flex; flex-direction: column;">
-                            <?php if($resource['images']): if(is_array($images) || $images instanceof \think\Collection || $images instanceof \think\Paginator): if( count($images)==0 ) : echo "" ;else: foreach($images as $key=>$image): ?>
-                            <div class="layui-upload-img-item" data-src="<?php echo htmlentities((string) $image); ?>">
-                                <img src="<?php echo htmlentities((string) $image); ?>" alt="已上传图片" style="width: 100px; height: 100px; object-fit: cover;">
-                                <p><?php echo htmlentities((string) basename($image)); ?></p>
-                                <button type="button"
-                                    class="layui-btn layui-btn-xs layui-btn-danger delete-image">删除</button>
+                <div class="image-upload-container">
+                    <button type="button" class="btn btn-primary" id="imageUpload">
+                        <i class="fas fa-upload"></i> 多图片上传
+                    </button>
+                    <div class="image-preview-container" id="imagePreview">
+                        <?php if(isset($resource['images']) && !empty($resource['images'])): if(is_array($resource['images']) || $resource['images'] instanceof \think\Collection || $resource['images'] instanceof \think\Paginator): if( count($resource['images'])==0 ) : echo "" ;else: foreach($resource['images'] as $key=>$image): ?>
+                        <div class="image-preview-item" data-src="<?php echo htmlentities((string) $image); ?>">
+                            <img src="<?php echo htmlentities((string) $image); ?>" alt="已上传图片">
+                            <div class="image-preview-overlay">
+                                <button type="button" class="btn btn-danger btn-sm delete-image">
+                                    <i class="fas fa-trash"></i>
+                                </button>
                            </div>
-                            <?php endforeach; endif; else: echo "" ;endif; ?>
-                            <?php endif; ?>
+                            <p class="image-filename"><?php echo htmlentities((string) basename($image)); ?></p>
                        </div>
-                    </blockquote>
+                        <?php endforeach; endif; else: echo "" ;endif; ?>
+                        <?php endif; ?>
+                    </div>
+                    <div class="upload-progress" id="imageProgress" style="display: none;">
+                        <div class="progress-bar" role="progressbar" style="width: 0%"></div>
+                    </div>
+                    <input type="hidden" name="images" id="images" value="<?php echo htmlentities((string) (isset($resource['images']) && ($resource['images'] !== '')?$resource['images']:'')); ?>">
                </div>
-                <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="image-progress"
-                    style="margin-top: 10px;">
-                    <div class="layui-progress-bar" lay-percent=""></div>
-                </div>
-                <input type="hidden" name="images" id="images" value="<?php echo htmlentities((string) (isset($resource['images']) && ($resource['images'] !== '')?$resource['images']:'')); ?>">
            </div>
        </div>

@@ -359,7 +360,7 @@
            accept: 'images',
            before: function (obj) {
                obj.preview(function (index, file, result) {
-                    $('#imagePreview').append('<div class="layui-upload-img-item" data-src="' + result + '"><img src="' + result + '" alt="' + file.name + '" style="width: 100px; height: 100px; object-fit: cover;"><p>' + file.name + '</p><button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-image">删除</button></div>');
+                    $('#imagePreview').append('<div class="layui-upload-img-item" data-src="' + result + '"><img src="' + result + '" alt="' + file.name + '" style="width: 100px; height: 100px; object-fit: cover;"><p>' + file.name + '</p><button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-image" style="position: absolute; top: 0; right: 0;">删除</button></div>');
                });
                element.progress('image-progress', '0%');
                layer.msg('图片上传中', { icon: 16, time: 0 });
@@ -657,4 +658,200 @@
    function goBack() {
        window.location.href = '<?php echo url("resources/lists"); ?>';
    }
-</script>
+</script>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const imageUpload = document.getElementById('imageUpload');
+        const imagePreview = document.getElementById('imagePreview');
+        const imageProgress = document.getElementById('imageProgress');
+        const progressBar = imageProgress.querySelector('.progress-bar');
+        const imagesInput = document.getElementById('images');
+
+        // 处理图片上传
+        imageUpload.addEventListener('click', function () {
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.multiple = true;
+            input.accept = 'image/*';
+
+            input.onchange = function (e) {
+                const files = e.target.files;
+                if (files.length === 0) return;
+
+                imageProgress.style.display = 'block';
+                let uploadedCount = 0;
+
+                Array.from(files).forEach(file => {
+                    const formData = new FormData();
+                    formData.append('file', file);
+
+                    fetch('<?php echo url("index/upload_img"); ?>', {
+                        method: 'POST',
+                        body: formData
+                    })
+                        .then(response => response.json())
+                        .then(res => {
+                            if (res.code === 0) {
+                                addImagePreview(res.data);
+                                updateImagesInput();
+                            } else {
+                                alert('上传失败：' + res.msg);
+                            }
+                        })
+                        .catch(error => {
+                            console.error('上传错误:', error);
+                            alert('上传出错');
+                        })
+                        .finally(() => {
+                            uploadedCount++;
+                            const progress = (uploadedCount / files.length) * 100;
+                            progressBar.style.width = progress + '%';
+
+                            if (uploadedCount === files.length) {
+                                setTimeout(() => {
+                                    imageProgress.style.display = 'none';
+                                    progressBar.style.width = '0%';
+                                }, 500);
+                            }
+                        });
+                });
+            };
+
+            input.click();
+        });
+
+        // 添加图片预览
+        function addImagePreview(imageUrl) {
+            const div = document.createElement('div');
+            div.className = 'image-preview-item';
+            div.dataset.src = imageUrl;
+
+            div.innerHTML = `
+            <img src="${imageUrl}" alt="已上传图片">
+            <div class="image-preview-overlay">
+                <button type="button" class="btn btn-danger btn-sm delete-image">
+                    <i class="fas fa-trash"></i>
+                </button>
+            </div>
+            <p class="image-filename">${imageUrl.split('/').pop()}</p>
+        `;
+
+            imagePreview.appendChild(div);
+        }
+
+        // 更新隐藏输入框的值
+        function updateImagesInput() {
+            const images = Array.from(imagePreview.querySelectorAll('.image-preview-item'))
+                .map(item => item.dataset.src);
+            imagesInput.value = images.join(',');
+        }
+
+        // 删除图片
+        imagePreview.addEventListener('click', function (e) {
+            if (e.target.closest('.delete-image')) {
+                const item = e.target.closest('.image-preview-item');
+                item.remove();
+                updateImagesInput();
+            }
+        });
+    });
+</script>
+
+<style>
+    .image-upload-container {
+        margin: 20px 0;
+    }
+
+    .image-preview-container {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 15px;
+        margin-top: 15px;
+    }
+
+    .image-preview-item {
+        position: relative;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .image-preview-item img {
+        width: 100%;
+        height: 150px;
+        object-fit: cover;
+        display: block;
+    }
+
+    .image-preview-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transition: opacity 0.3s;
+    }
+
+    .image-preview-item:hover .image-preview-overlay {
+        opacity: 1;
+    }
+
+    .image-filename {
+        margin: 5px 0;
+        font-size: 0.9em;
+        text-align: center;
+        word-break: break-all;
+    }
+
+    .upload-progress {
+        margin-top: 10px;
+        height: 4px;
+        background: #f0f0f0;
+        border-radius: 2px;
+        overflow: hidden;
+    }
+
+    .progress-bar {
+        height: 100%;
+        background: #007bff;
+        transition: width 0.3s ease;
+    }
+
+    .btn {
+        padding: 8px 16px;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 14px;
+        transition: all 0.3s;
+    }
+
+    .btn-primary {
+        background: #007bff;
+        color: white;
+    }
+
+    .btn-primary:hover {
+        background: #0056b3;
+    }
+
+    .btn-danger {
+        background: #dc3545;
+        color: white;
+    }
+
+    .btn-danger:hover {
+        background: #c82333;
+    }
+
+    .btn-sm {
+        padding: 4px 8px;
+        font-size: 12px;
+    }
+</style>