查看“︁微件:BatchUpload”︁的源代码

<includeonly>
<style>
.batch-upload-container {
    margin: 20px 0;
    padding: 20px;
    border: 2px dashed #ccc;
    border-radius: 12px;
    text-align: center;
    background: #fafafa;
}
.batch-upload-container.dragover {
    border-color: #4CAF50;
    background: #f0fff0;
}
.batch-upload-input {
    display: none;
}
.batch-upload-btn {
    display: inline-block;
    padding: 10px 30px;
    background: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    margin: 10px;
}
.batch-upload-btn:hover {
    background: #45a049;
}
.batch-upload-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.batch-upload-list {
    margin-top: 15px;
    text-align: left;
    max-height: 400px;
    overflow-y: auto;
}
.batch-upload-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    gap: 10px;
}
.batch-upload-item .file-info {
    flex: 1;
    min-width: 0;
}
.batch-upload-item .file-original {
    font-size: 12px;
    color: #999;
    word-break: break-all;
}
.batch-upload-item .file-rename {
    width: 200px;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}
.batch-upload-item .file-rename:focus {
    border-color: #4CAF50;
    outline: none;
}
.batch-upload-item .file-status {
    font-size: 12px;
    min-width: 60px;
    text-align: right;
}
.status-waiting { color: #999; }
.status-uploading { color: #2196F3; }
.status-success { color: #4CAF50; }
.status-error { color: #f44336; }
.batch-upload-progress {
    width: 100%;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    margin: 15px 0;
    overflow: hidden;
    display: none;
}
.batch-upload-progress-bar {
    height: 100%;
    background: #4CAF50;
    border-radius: 3px;
    transition: width 0.3s;
    width: 0%;
}
.batch-upload-summary {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
    display: none;
}
.batch-upload-actions {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.batch-upload-remove {
    color: #f44336;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}
.batch-upload-remove:hover {
    color: #d32f2f;
}
.batch-upload-ext {
    font-size: 12px;
    color: #999;
    margin-left: 2px;
}
</style>

<div class="batch-upload-container" id="batch-upload-container">
    <h3>📤 批量上传图片</h3>
    <p style="color:#888;font-size:14px;">支持一次选择多张图片，或拖拽图片到此处</p>
    <input type="file" class="batch-upload-input" id="batch-upload-input" multiple accept="image/*">
    <div class="batch-upload-actions">
        <button class="batch-upload-btn" id="batch-upload-select">选择图片</button>
        <button class="batch-upload-btn" id="batch-upload-clear">清空列表</button>
    </div>
    <div class="batch-upload-progress" id="batch-upload-progress">
        <div class="batch-upload-progress-bar" id="batch-upload-progress-bar"></div>
    </div>
    <div class="batch-upload-list" id="batch-upload-list"></div>
    <div class="batch-upload-summary" id="batch-upload-summary"></div>
    <button class="batch-upload-btn" id="batch-upload-start" disabled>开始上传</button>
</div>

<script>
(function() {
    var $container = $('#batch-upload-container');
    var $input = $('#batch-upload-input');
    var $selectBtn = $('#batch-upload-select');
    var $clearBtn = $('#batch-upload-clear');
    var $startBtn = $('#batch-upload-start');
    var $list = $('#batch-upload-list');
    var $progress = $('#batch-upload-progress');
    var $progressBar = $('#batch-upload-progress-bar');
    var $summary = $('#batch-upload-summary');

    var files = [];
    var uploadedCount = 0;
    var totalCount = 0;
    var isUploading = false;

    // 获取文件扩展名
    function getExt(filename) {
        var lastDot = filename.lastIndexOf('.');
        return lastDot > -1 ? filename.substring(lastDot) : '';
    }

    // 获取不带扩展名的文件名
    function getNameWithoutExt(filename) {
        var lastDot = filename.lastIndexOf('.');
        return lastDot > -1 ? filename.substring(0, lastDot) : filename;
    }

    $selectBtn.click(function() {
        $input.click();
    });

    $input.change(function() {
        addFiles(this.files);
        $input.val('');
    });

    $container.on('dragover', function(e) {
        e.preventDefault();
        $container.addClass('dragover');
    });

    $container.on('dragleave', function() {
        $container.removeClass('dragover');
    });

    $container.on('drop', function(e) {
        e.preventDefault();
        $container.removeClass('dragover');
        addFiles(e.originalEvent.dataTransfer.files);
    });

    $clearBtn.click(function() {
        files = [];
        renderList();
        updateStartButton();
        $summary.hide();
    });

    function addFiles(newFiles) {
        for (var i = 0; i < newFiles.length; i++) {
            var file = newFiles[i];
            if (file.type.match(/^image\//)) {
                // 存储原始文件和目标文件名
                file._targetName = getNameWithoutExt(file.name);
                file._ext = getExt(file.name);
                files.push(file);
            }
        }
        renderList();
        updateStartButton();
    }

    function renderList() {
        $list.empty();
        if (files.length === 0) {
            $list.append('<p style="color:#999;text-align:center;">暂无文件</p>');
            return;
        }
        files.forEach(function(file, index) {
            var sizeStr = file.size > 1024 * 1024 ? (file.size / (1024 * 1024)).toFixed(1) + ' MB' : (file.size / 1024).toFixed(0) + ' KB';
            var $item = $('<div>', { class: 'batch-upload-item' });

            // 文件信息
            var $info = $('<div>', { class: 'file-info' });
            $info.append('<input type="text" class="file-rename" value="' + file._targetName + '" data-index="' + index + '">');
            $info.append('<span class="batch-upload-ext">' + file._ext + '</span>');
            $info.append('<div class="file-original">原始: ' + file.name + ' (' + sizeStr + ')</div>');
            $item.append($info);

            // 状态
            $item.append('<span class="file-status status-waiting" data-index="' + index + '">等待上传</span>');

            // 删除
            $item.append('<span class="batch-upload-remove" data-index="' + index + '" title="移除">×</span>');

            $list.append($item);
        });

        // 绑定改名事件
        $('.file-rename').off('input').on('input', function() {
            var idx = parseInt($(this).data('index'));
            if (files[idx]) {
                files[idx]._targetName = $(this).val().trim();
            }
        });

        // 绑定删除事件
        $('.batch-upload-remove').off('click').click(function() {
            var idx = parseInt($(this).data('index'));
            files.splice(idx, 1);
            renderList();
            updateStartButton();
        });
    }

    function updateStartButton() {
        $startBtn.prop('disabled', files.length === 0 || isUploading);
    }

    function getEditToken() {
        return mw.user.tokens.get('csrfToken');
    }

    function uploadFile(file, index) {
        return new Promise(function(resolve, reject) {
            var targetName = (file._targetName || getNameWithoutExt(file.name)) + file._ext;
            var formData = new FormData();
            formData.append('action', 'upload');
            formData.append('filename', targetName);
            formData.append('file', file);
            formData.append('format', 'json');
            formData.append('token', getEditToken());
            formData.append('ignorewarnings', '1');

            $.ajax({
                url: mw.util.wikiScript('api'),
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                    if (data.upload && data.upload.result === 'Success') {
                        resolve({ success: true, name: targetName });
                    } else {
                        var errMsg = '未知错误';
                        if (data.upload && data.upload.warnings) {
                            errMsg = JSON.stringify(data.upload.warnings);
                        } else if (data.error) {
                            errMsg = data.error.info || '未知错误';
                        }
                        resolve({ success: false, name: targetName, error: errMsg });
                    }
                },
                error: function(xhr) {
                    resolve({ success: false, name: targetName, error: 'HTTP ' + xhr.status });
                }
            });
        });
    }

    $startBtn.click(function() {
        if (isUploading || files.length === 0) return;
        isUploading = true;
        uploadedCount = 0;
        totalCount = files.length;
        updateStartButton();
        $selectBtn.prop('disabled', true);
        $clearBtn.prop('disabled', true);
        $progress.show();
        $summary.hide();
        $progressBar.css('width', '0%');
        $('.file-rename').prop('disabled', true);
        $('.batch-upload-remove').hide();

        var uploadQueue = Promise.resolve();
        files.forEach(function(file, index) {
            uploadQueue = uploadQueue.then(function() {
                $('.file-status[data-index="' + index + '"]')
                    .removeClass('status-waiting')
                    .addClass('status-uploading')
                    .text('上传中...');

                return uploadFile(file, index).then(function(result) {
                    uploadedCount++;
                    var progress = Math.round((uploadedCount / totalCount) * 100);
                    $progressBar.css('width', progress + '%');

                    if (result.success) {
                        $('.file-status[data-index="' + index + '"]')
                            .removeClass('status-uploading')
                            .addClass('status-success')
                            .text('✅ 成功');
                    } else {
                        $('.file-status[data-index="' + index + '"]')
                            .removeClass('status-uploading')
                            .addClass('status-error')
                            .text('❌ 失败');
                        console.log('上传失败:', result.name, result.error);
                    }
                });
            });
        });

        uploadQueue.then(function() {
            isUploading = false;
            $selectBtn.prop('disabled', false);
            $clearBtn.prop('disabled', false);
            updateStartButton();
            var successCount = $('.status-success').length;
            var failCount = $('.status-error').length;
            $summary.show().html('上传完成！成功 ' + successCount + ' 张，失败 ' + failCount + ' 张。');
            files = [];
            // 保留列表显示结果，5 秒后可清空
            setTimeout(function() {
                if (files.length === 0 && !isUploading) {
                    renderList();
                    $progress.hide();
                }
            }, 5000);
        });
    });
})();
</script>
</includeonly>