https://new.pvzhe.wiki/w/%E5%BE%AE%E4%BB%B6:BatchUpload?action=history&feed=atom
微件:BatchUpload - 版本历史
2026-06-14T02:27:14Z
本wiki上该页面的版本历史
MediaWiki 1.43.6
https://new.pvzhe.wiki/index.php?title=%E5%BE%AE%E4%BB%B6:BatchUpload&diff=4600&oldid=prev
2026年6月12日 (五) 12:25 愤怒的郎朗
2026-06-12T12:25:31Z
<p></p>
<a href="https://new.pvzhe.wiki/index.php?title=%E5%BE%AE%E4%BB%B6:BatchUpload&diff=4600&oldid=4386">显示更改</a>
愤怒的郎朗
https://new.pvzhe.wiki/index.php?title=%E5%BE%AE%E4%BB%B6:BatchUpload&diff=4386&oldid=prev
2026年6月11日 (四) 12:43 愤怒的郎朗
2026-06-11T12:43:07Z
<p></p>
<a href="https://new.pvzhe.wiki/index.php?title=%E5%BE%AE%E4%BB%B6:BatchUpload&diff=4386&oldid=4209">显示更改</a>
愤怒的郎朗
https://new.pvzhe.wiki/index.php?title=%E5%BE%AE%E4%BB%B6:BatchUpload&diff=4209&oldid=prev
2026年6月10日 (三) 11:39 愤怒的郎朗
2026-06-10T11:39:02Z
<p></p>
<a href="https://new.pvzhe.wiki/index.php?title=%E5%BE%AE%E4%BB%B6:BatchUpload&diff=4209&oldid=4207">显示更改</a>
愤怒的郎朗
https://new.pvzhe.wiki/index.php?title=%E5%BE%AE%E4%BB%B6:BatchUpload&diff=4207&oldid=prev
愤怒的郎朗：创建页面，内容为“<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…”
2026-06-10T11:30:31Z
<p>创建页面，内容为“<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…”</p>
<p><b>新页面</b></p><div><includeonly><br />
<style><br />
.batch-upload-container {<br />
margin: 20px 0;<br />
padding: 20px;<br />
border: 2px dashed #ccc;<br />
border-radius: 12px;<br />
text-align: center;<br />
background: #fafafa;<br />
}<br />
.batch-upload-container.dragover {<br />
border-color: #4CAF50;<br />
background: #f0fff0;<br />
}<br />
.batch-upload-input {<br />
display: none;<br />
}<br />
.batch-upload-btn {<br />
display: inline-block;<br />
padding: 10px 30px;<br />
background: #4CAF50;<br />
color: #fff;<br />
border: none;<br />
border-radius: 8px;<br />
font-size: 16px;<br />
cursor: pointer;<br />
margin: 10px;<br />
}<br />
.batch-upload-btn:hover {<br />
background: #45a049;<br />
}<br />
.batch-upload-btn:disabled {<br />
background: #ccc;<br />
cursor: not-allowed;<br />
}<br />
.batch-upload-list {<br />
margin-top: 15px;<br />
text-align: left;<br />
max-height: 400px;<br />
overflow-y: auto;<br />
}<br />
.batch-upload-item {<br />
display: flex;<br />
align-items: center;<br />
padding: 8px 12px;<br />
border-bottom: 1px solid #eee;<br />
font-size: 14px;<br />
gap: 10px;<br />
}<br />
.batch-upload-item .file-info {<br />
flex: 1;<br />
min-width: 0;<br />
}<br />
.batch-upload-item .file-original {<br />
font-size: 12px;<br />
color: #999;<br />
word-break: break-all;<br />
}<br />
.batch-upload-item .file-rename {<br />
width: 200px;<br />
padding: 4px 8px;<br />
border: 1px solid #ccc;<br />
border-radius: 4px;<br />
font-size: 13px;<br />
}<br />
.batch-upload-item .file-rename:focus {<br />
border-color: #4CAF50;<br />
outline: none;<br />
}<br />
.batch-upload-item .file-status {<br />
font-size: 12px;<br />
min-width: 60px;<br />
text-align: right;<br />
}<br />
.status-waiting { color: #999; }<br />
.status-uploading { color: #2196F3; }<br />
.status-success { color: #4CAF50; }<br />
.status-error { color: #f44336; }<br />
.batch-upload-progress {<br />
width: 100%;<br />
height: 6px;<br />
background: #e0e0e0;<br />
border-radius: 3px;<br />
margin: 15px 0;<br />
overflow: hidden;<br />
display: none;<br />
}<br />
.batch-upload-progress-bar {<br />
height: 100%;<br />
background: #4CAF50;<br />
border-radius: 3px;<br />
transition: width 0.3s;<br />
width: 0%;<br />
}<br />
.batch-upload-summary {<br />
margin-top: 10px;<br />
font-size: 14px;<br />
color: #555;<br />
display: none;<br />
}<br />
.batch-upload-actions {<br />
margin-top: 10px;<br />
display: flex;<br />
justify-content: center;<br />
gap: 10px;<br />
flex-wrap: wrap;<br />
}<br />
.batch-upload-remove {<br />
color: #f44336;<br />
cursor: pointer;<br />
font-size: 18px;<br />
line-height: 1;<br />
}<br />
.batch-upload-remove:hover {<br />
color: #d32f2f;<br />
}<br />
.batch-upload-ext {<br />
font-size: 12px;<br />
color: #999;<br />
margin-left: 2px;<br />
}<br />
</style><br />
<br />
<div class="batch-upload-container" id="batch-upload-container"><br />
<h3>📤 批量上传图片</h3><br />
<p style="color:#888;font-size:14px;">支持一次选择多张图片，或拖拽图片到此处</p><br />
<input type="file" class="batch-upload-input" id="batch-upload-input" multiple accept="image/*"><br />
<div class="batch-upload-actions"><br />
<button class="batch-upload-btn" id="batch-upload-select">选择图片</button><br />
<button class="batch-upload-btn" id="batch-upload-clear">清空列表</button><br />
</div><br />
<div class="batch-upload-progress" id="batch-upload-progress"><br />
<div class="batch-upload-progress-bar" id="batch-upload-progress-bar"></div><br />
</div><br />
<div class="batch-upload-list" id="batch-upload-list"></div><br />
<div class="batch-upload-summary" id="batch-upload-summary"></div><br />
<button class="batch-upload-btn" id="batch-upload-start" disabled>开始上传</button><br />
</div><br />
<br />
<script><br />
(function() {<br />
var $container = $('#batch-upload-container');<br />
var $input = $('#batch-upload-input');<br />
var $selectBtn = $('#batch-upload-select');<br />
var $clearBtn = $('#batch-upload-clear');<br />
var $startBtn = $('#batch-upload-start');<br />
var $list = $('#batch-upload-list');<br />
var $progress = $('#batch-upload-progress');<br />
var $progressBar = $('#batch-upload-progress-bar');<br />
var $summary = $('#batch-upload-summary');<br />
<br />
var files = [];<br />
var uploadedCount = 0;<br />
var totalCount = 0;<br />
var isUploading = false;<br />
<br />
// 获取文件扩展名<br />
function getExt(filename) {<br />
var lastDot = filename.lastIndexOf('.');<br />
return lastDot > -1 ? filename.substring(lastDot) : '';<br />
}<br />
<br />
// 获取不带扩展名的文件名<br />
function getNameWithoutExt(filename) {<br />
var lastDot = filename.lastIndexOf('.');<br />
return lastDot > -1 ? filename.substring(0, lastDot) : filename;<br />
}<br />
<br />
$selectBtn.click(function() {<br />
$input.click();<br />
});<br />
<br />
$input.change(function() {<br />
addFiles(this.files);<br />
$input.val('');<br />
});<br />
<br />
$container.on('dragover', function(e) {<br />
e.preventDefault();<br />
$container.addClass('dragover');<br />
});<br />
<br />
$container.on('dragleave', function() {<br />
$container.removeClass('dragover');<br />
});<br />
<br />
$container.on('drop', function(e) {<br />
e.preventDefault();<br />
$container.removeClass('dragover');<br />
addFiles(e.originalEvent.dataTransfer.files);<br />
});<br />
<br />
$clearBtn.click(function() {<br />
files = [];<br />
renderList();<br />
updateStartButton();<br />
$summary.hide();<br />
});<br />
<br />
function addFiles(newFiles) {<br />
for (var i = 0; i < newFiles.length; i++) {<br />
var file = newFiles[i];<br />
if (file.type.match(/^image\//)) {<br />
// 存储原始文件和目标文件名<br />
file._targetName = getNameWithoutExt(file.name);<br />
file._ext = getExt(file.name);<br />
files.push(file);<br />
}<br />
}<br />
renderList();<br />
updateStartButton();<br />
}<br />
<br />
function renderList() {<br />
$list.empty();<br />
if (files.length === 0) {<br />
$list.append('<p style="color:#999;text-align:center;">暂无文件</p>');<br />
return;<br />
}<br />
files.forEach(function(file, index) {<br />
var sizeStr = file.size > 1024 * 1024 ? (file.size / (1024 * 1024)).toFixed(1) + ' MB' : (file.size / 1024).toFixed(0) + ' KB';<br />
var $item = $('<div>', { class: 'batch-upload-item' });<br />
<br />
// 文件信息<br />
var $info = $('<div>', { class: 'file-info' });<br />
$info.append('<input type="text" class="file-rename" value="' + file._targetName + '" data-index="' + index + '">');<br />
$info.append('<span class="batch-upload-ext">' + file._ext + '</span>');<br />
$info.append('<div class="file-original">原始: ' + file.name + ' (' + sizeStr + ')</div>');<br />
$item.append($info);<br />
<br />
// 状态<br />
$item.append('<span class="file-status status-waiting" data-index="' + index + '">等待上传</span>');<br />
<br />
// 删除<br />
$item.append('<span class="batch-upload-remove" data-index="' + index + '" title="移除">×</span>');<br />
<br />
$list.append($item);<br />
});<br />
<br />
// 绑定改名事件<br />
$('.file-rename').off('input').on('input', function() {<br />
var idx = parseInt($(this).data('index'));<br />
if (files[idx]) {<br />
files[idx]._targetName = $(this).val().trim();<br />
}<br />
});<br />
<br />
// 绑定删除事件<br />
$('.batch-upload-remove').off('click').click(function() {<br />
var idx = parseInt($(this).data('index'));<br />
files.splice(idx, 1);<br />
renderList();<br />
updateStartButton();<br />
});<br />
}<br />
<br />
function updateStartButton() {<br />
$startBtn.prop('disabled', files.length === 0 || isUploading);<br />
}<br />
<br />
function getEditToken() {<br />
return mw.user.tokens.get('csrfToken');<br />
}<br />
<br />
function uploadFile(file, index) {<br />
return new Promise(function(resolve, reject) {<br />
var targetName = (file._targetName || getNameWithoutExt(file.name)) + file._ext;<br />
var formData = new FormData();<br />
formData.append('action', 'upload');<br />
formData.append('filename', targetName);<br />
formData.append('file', file);<br />
formData.append('format', 'json');<br />
formData.append('token', getEditToken());<br />
formData.append('ignorewarnings', '1');<br />
<br />
$.ajax({<br />
url: mw.util.wikiScript('api'),<br />
type: 'POST',<br />
data: formData,<br />
processData: false,<br />
contentType: false,<br />
success: function(data) {<br />
if (data.upload && data.upload.result === 'Success') {<br />
resolve({ success: true, name: targetName });<br />
} else {<br />
var errMsg = '未知错误';<br />
if (data.upload && data.upload.warnings) {<br />
errMsg = JSON.stringify(data.upload.warnings);<br />
} else if (data.error) {<br />
errMsg = data.error.info || '未知错误';<br />
}<br />
resolve({ success: false, name: targetName, error: errMsg });<br />
}<br />
},<br />
error: function(xhr) {<br />
resolve({ success: false, name: targetName, error: 'HTTP ' + xhr.status });<br />
}<br />
});<br />
});<br />
}<br />
<br />
$startBtn.click(function() {<br />
if (isUploading || files.length === 0) return;<br />
isUploading = true;<br />
uploadedCount = 0;<br />
totalCount = files.length;<br />
updateStartButton();<br />
$selectBtn.prop('disabled', true);<br />
$clearBtn.prop('disabled', true);<br />
$progress.show();<br />
$summary.hide();<br />
$progressBar.css('width', '0%');<br />
$('.file-rename').prop('disabled', true);<br />
$('.batch-upload-remove').hide();<br />
<br />
var uploadQueue = Promise.resolve();<br />
files.forEach(function(file, index) {<br />
uploadQueue = uploadQueue.then(function() {<br />
$('.file-status[data-index="' + index + '"]')<br />
.removeClass('status-waiting')<br />
.addClass('status-uploading')<br />
.text('上传中...');<br />
<br />
return uploadFile(file, index).then(function(result) {<br />
uploadedCount++;<br />
var progress = Math.round((uploadedCount / totalCount) * 100);<br />
$progressBar.css('width', progress + '%');<br />
<br />
if (result.success) {<br />
$('.file-status[data-index="' + index + '"]')<br />
.removeClass('status-uploading')<br />
.addClass('status-success')<br />
.text('✅ 成功');<br />
} else {<br />
$('.file-status[data-index="' + index + '"]')<br />
.removeClass('status-uploading')<br />
.addClass('status-error')<br />
.text('❌ 失败');<br />
console.log('上传失败:', result.name, result.error);<br />
}<br />
});<br />
});<br />
});<br />
<br />
uploadQueue.then(function() {<br />
isUploading = false;<br />
$selectBtn.prop('disabled', false);<br />
$clearBtn.prop('disabled', false);<br />
updateStartButton();<br />
var successCount = $('.status-success').length;<br />
var failCount = $('.status-error').length;<br />
$summary.show().html('上传完成！成功 ' + successCount + ' 张，失败 ' + failCount + ' 张。');<br />
files = [];<br />
// 保留列表显示结果，5 秒后可清空<br />
setTimeout(function() {<br />
if (files.length === 0 && !isUploading) {<br />
renderList();<br />
$progress.hide();<br />
}<br />
}, 5000);<br />
});<br />
});<br />
})();<br />
</script><br />
</includeonly></div>
愤怒的郎朗