微件:PicUpload - 版本历史

律Rhyme：创建页面，内容为“{{Path|微件}}{{#微件:PicUpload}}分类:微件
图片分类 (必填)

2026-08-02T02:30:54Z

创建页面，内容为“<noinclude>{{Path|微件}}{{#微件:PicUpload}}分类:微件</noinclude> <includeonly> <div class="pu-container"><div class="pu-form"><div class="pu-formrow"><span class="pu-formlabel">图片分类 (必填)</span><input type="text" class="pu-forminput" id="pu-category" placeholder="多个分类使用英文逗号,隔开"></div><div class="pu-formrow"><span cla…”

新页面
<noinclude>{{Path|微件}}{{#微件:PicUpload}}[[分类:微件]]</noinclude>
<includeonly>
<div class="pu-container"><div class="pu-form"><div class="pu-formrow"><span class="pu-formlabel">图片分类 (必填)</span><input type="text" class="pu-forminput" id="pu-category" placeholder="多个分类使用英文逗号,隔开"></div><div class="pu-formrow"><span class="pu-formlabel">来源 (必填)</span><select class="pu-formselect" id="pu-source"><option value="datamine">datamine</option><option value="official">official</option></select></div><div class="pu-formrow"><span class="pu-formlabel">是否编辑 (选填)</span><select class="pu-formselect" id="pu-isedited"><option value="">不填</option><option value="是">是</option><option value="否">否</option></select></div><div class="pu-formrow"><button class="pu-btn pu-btn--select" id="pu-select-btn">选择图片</button><button class="pu-btn pu-btn--upload" id="pu-upload-btn">开始上传</button><input type="file" id="pu-file-input" multiple accept="image/" style="display:none;"></div></div><div class="pu-log" id="pu-log"></div></div>

<style>
/ 容器 /
.pu-container { box-sizing: border-box; max-width: 800px; padding: 16px; border: 1px solid #a2a9b1; border-radius: 4px; background-color: #f8f9fa; }
/ 表单区域 /
.pu-form { display: flex; flex-direction: column; gap: 12px; }
/ 表单行 /
.pu-formrow { display: flex; align-items: center; gap: 10px; }
/ 标签 /
.pu-formlabel { width: 120px; font-size: 14px; color: #202122; font-weight: bold; flex-shrink: 0; }
/ 输入框与下拉框通用样式 /
.pu-forminput, .pu-formselect { flex-grow: 1; padding: 6px 8px; border: 1px solid #a2a9b1; border-radius: 2px; font-size: 14px; box-sizing: border-box; }
/ 按钮 /
.pu-btn { padding: 6px 12px; border: 1px solid #a2a9b1; border-radius: 2px; background-color: #fff; cursor: pointer; font-size: 14px; line-height: 1.5; }
.pu-btn:hover { background-color: #eaecf0; }
/ 选择文件按钮修饰符 /
.pu-btn--select { border-color: #36c; color: #36c; }
/ 上传按钮修饰符 /
.pu-btn--upload { border-color: #36c; background-color: #36c; color: #fff; }
.pu-btn--upload:disabled { background-color: #a2a9b1; border-color: #a2a9b1; cursor: not-allowed; }
/ 日志区域 /
.pu-log { margin-top: 16px; max-height: 200px; overflow-y: auto; border: 1px solid #a2a9b1; border-radius: 2px; background-color: #fff; padding: 8px; box-sizing: border-box; }
.pu-logitem { padding: 4px 0; font-size: 13px; border-bottom: 1px solid #eaecf0; }
.pu-logitem:last-child { border-bottom: none; }
.pu-logitem--success { color: #14866d; }
.pu-logitem--error { color: #d33; }
.pu-logitem--info { color: #202122; }
</style>

<script>
(function() {
var fileInput = document.getElementById('pu-file-input');
var selectBtn = document.getElementById('pu-select-btn');
var uploadBtn = document.getElementById('pu-upload-btn');
var logArea = document.getElementById('pu-log');
var isUploading = false;

// 选择文件按钮事件
selectBtn.addEventListener('click', function() {
fileInput.click();
});

// 监听文件选择，更新按钮文字
fileInput.addEventListener('change', function() {
if(fileInput.files.length > 0) {
selectBtn.textContent = '已选择 ' + fileInput.files.length + ' 个文件';
} else {
selectBtn.textContent = '选择图片';
}
});

// 上传按钮事件
uploadBtn.addEventListener('click', async function() {
if (isUploading) return;
if (fileInput.files.length === 0) {
alert('请先选择图片');
return;
}

// 获取表单数据
var category = document.getElementById('pu-category').value.trim();
var source = document.getElementById('pu-source').value;
var isEdited = document.getElementById('pu-isedited').value;

// 校验必填项
if (!category) {
alert('分类为必填项');
return;
}
if (!source) {
alert('来源为必填项');
return;
}

isUploading = true;
uploadBtn.disabled = true;
uploadBtn.textContent = '上传中...';
appendLog('开始上传任务...', 'info');

// 获取MediaWiki CSRF Token
var token = '';
try {
var tokenRes = await fetch('https://cznwiki.com/api.php?action=query&meta=tokens&type=csrf&format=json');
var tokenData = await tokenRes.json();
token = tokenData.query.tokens.csrftoken;
} catch (e) {
appendLog('获取Token失败，请检查网络或登录状态', 'error');
isUploading = false;
uploadBtn.disabled = false;
uploadBtn.textContent = '开始上传';
return;
}

// 遍历文件队列上传
for (var i = 0; i < fileInput.files.length; i++) {
var file = fileInput.files[i];
appendLog('正在上传: ' + file.name, 'info');

// 构建 WikiText
var wikiText = '';
var cats = category.split(',');
for (var j = 0; j < cats.length; j++) {
var cat = cats[j].trim();
if (cat) {
wikiText += '[[Category:' + cat + ']]\n';
}
}
wikiText += '\n== 图片信息 ==\n';
wikiText += ' source: ' + source + '\n';
if (isEdited) {
wikiText += '* isEdited: ' + isEdited + '\n';
}

// 构建 FormData
var formData = new FormData();
formData.append('action', 'upload');
formData.append('filename', file.name);
formData.append('file', file);
formData.append('text', wikiText);
formData.append('token', token);
formData.append('format', 'json');
formData.append('ignorewarnings', '1'); // 覆盖同名文件

try {
var uploadRes = await fetch('https://cznwiki.com/api.php', {
method: 'POST',
body: formData
});
var uploadData = await uploadRes.json();

if (uploadData.upload && uploadData.upload.result === 'Success') {
appendLog('成功: ' + file.name, 'success');
} else if (uploadData.error) {
appendLog('失败: ' + file.name + ' (原因: ' + uploadData.error.info + ')', 'error');
} else {
appendLog('未知结果: ' + file.name, 'error');
}
} catch (e) {
appendLog('网络错误: ' + file.name, 'error');
}
}

isUploading = false;
uploadBtn.disabled = false;
uploadBtn.textContent = '开始上传';
fileInput.value = '';
selectBtn.textContent = '选择图片';
appendLog('全部上传任务结束', 'info');
});

// 日志输出函数
function appendLog(msg, type) {
var div = document.createElement('div');
div.className = 'pu-logitem pu-log__item--' + (type || 'info');
div.textContent = msg;
logArea.appendChild(div);
// 自动滚动到底部
logArea.scrollTop = logArea.scrollHeight;
}
})();
</script>
</includeonly>