444 lines
16 KiB
PHP
444 lines
16 KiB
PHP
<?php if(!defined('__TYPECHO_ADMIN__')) exit; ?>
|
||
|
||
<?php
|
||
if (isset($post) || isset($page)) {
|
||
$cid = isset($post) ? $post->cid : $page->cid;
|
||
|
||
if ($cid) {
|
||
\Widget\Contents\Attachment\Related::alloc(['parentId' => $cid])->to($attachment);
|
||
} else {
|
||
\Widget\Contents\Attachment\Unattached::alloc()->to($attachment);
|
||
}
|
||
}
|
||
?>
|
||
|
||
<div id="upload-panel" class="p">
|
||
<div class="upload-area" data-url="<?php $security->index('/action/upload'); ?>">
|
||
<?php _e('拖放文件到这里<br>或者 %s选择文件上传%s', '<a href="###" class="upload-file">', '</a>'); ?>
|
||
</div>
|
||
<ul id="file-list">
|
||
<?php while ($attachment->next()): ?>
|
||
<li data-cid="<?php $attachment->cid(); ?>" data-url="<?php echo $attachment->attachment->url; ?>" data-image="<?php echo $attachment->attachment->isImage ? 1 : 0; ?>"><input type="hidden" name="attachment[]" value="<?php $attachment->cid(); ?>" />
|
||
<a class="insert" title="<?php _e('点击插入文件'); ?>" href="###"><?php $attachment->title(); ?></a>
|
||
<div class="info">
|
||
<?php echo number_format(ceil($attachment->attachment->size / 1024)); ?> Kb
|
||
<a class="file" target="_blank" href="<?php $options->adminUrl('media.php?cid=' . $attachment->cid); ?>" title="<?php _e('编辑'); ?>"><i class="i-edit"></i></a>
|
||
<a href="###" class="delete" title="<?php _e('删除'); ?>"><i class="i-delete"></i></a>
|
||
</div>
|
||
</li>
|
||
<?php endwhile; ?>
|
||
</ul>
|
||
</div>
|
||
|
||
<style>
|
||
#upload-notice {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 99999;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: #fff;
|
||
padding: 60px 150px;
|
||
border-radius: 4px;
|
||
font-size: 16px;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||
animation: fadeInOut 3s ease-in-out forwards;
|
||
pointer-events: none;
|
||
}
|
||
|
||
@keyframes fadeInOut {
|
||
0% { opacity: 0; }
|
||
10% { opacity: 1; }
|
||
90% { opacity: 1; }
|
||
100% { opacity: 0; visibility: hidden; }
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
(function() {
|
||
// 防止重复初始化
|
||
if (window._uploadFinalFixed) return;
|
||
window._uploadFinalFixed = true;
|
||
|
||
var uploadUrl = document.querySelector('.upload-area').getAttribute('data-url');
|
||
var fileList = document.getElementById('file-list');
|
||
var isUploading = false;
|
||
var isSelecting = false;
|
||
|
||
// 显示居中提示
|
||
function showNotice(message) {
|
||
var oldNotice = document.getElementById('upload-notice');
|
||
if (oldNotice) {
|
||
oldNotice.remove();
|
||
}
|
||
var notice = document.createElement('div');
|
||
notice.id = 'upload-notice';
|
||
notice.textContent = message;
|
||
document.body.appendChild(notice);
|
||
setTimeout(function() {
|
||
var n = document.getElementById('upload-notice');
|
||
if (n) n.remove();
|
||
}, 3000);
|
||
}
|
||
|
||
// 获取当前文章cid
|
||
function getCurrentCid() {
|
||
var cidInput = document.querySelector('input[name="cid"]');
|
||
return cidInput && cidInput.value ? cidInput.value : '';
|
||
}
|
||
|
||
// 激活附件菜单（切换到附件选项卡）
|
||
function activateAttachmentsMenu() {
|
||
// 根据实际HTML结构，附件选项卡的ID是 tab-files-btn
|
||
var attachmentsTab = document.getElementById('tab-files-btn');
|
||
|
||
if (!attachmentsTab) {
|
||
// 备用选择器
|
||
attachmentsTab = document.querySelector('a[href="#tab-files"]');
|
||
}
|
||
|
||
if (!attachmentsTab) {
|
||
// 再尝试查找包含"附件"文字的选项卡
|
||
var allTabs = document.querySelectorAll('.typecho-option-tabs li a');
|
||
for (var i = 0; i < allTabs.length; i++) {
|
||
var text = allTabs[i].innerText || allTabs[i].textContent;
|
||
if (text && text.indexOf('附件') !== -1) {
|
||
attachmentsTab = allTabs[i];
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (attachmentsTab) {
|
||
// 检查是否已经是激活状态
|
||
var parentLi = attachmentsTab.parentNode;
|
||
if (parentLi && parentLi.className.indexOf('active') !== -1) {
|
||
return; // 已经是激活状态，不需要切换
|
||
}
|
||
|
||
// 模拟点击附件选项卡
|
||
if (typeof attachmentsTab.click === 'function') {
|
||
attachmentsTab.click();
|
||
} else if (typeof jQuery !== 'undefined') {
|
||
jQuery(attachmentsTab).trigger('click');
|
||
}
|
||
|
||
// 手动切换选项卡内容
|
||
var tabFiles = document.getElementById('tab-files');
|
||
var tabAdvance = document.getElementById('tab-advance');
|
||
if (tabFiles && tabAdvance) {
|
||
tabFiles.classList.remove('hidden');
|
||
tabAdvance.classList.add('hidden');
|
||
}
|
||
|
||
// 更新选项卡样式
|
||
if (parentLi) {
|
||
var allTabsLis = document.querySelectorAll('.typecho-option-tabs li');
|
||
for (var i = 0; i < allTabsLis.length; i++) {
|
||
allTabsLis[i].classList.remove('active');
|
||
}
|
||
parentLi.classList.add('active');
|
||
}
|
||
}
|
||
}
|
||
|
||
// 刷新附件列表（不刷新整个页面）
|
||
function refreshAttachmentList() {
|
||
var cid = getCurrentCid();
|
||
var url = window.location.origin + '/admin/ajax/attachment-list?cid=' + cid;
|
||
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open('GET', url, true);
|
||
xhr.onload = function() {
|
||
if (xhr.status === 200) {
|
||
try {
|
||
var data = JSON.parse(xhr.responseText);
|
||
if (data && data.html) {
|
||
// 保存当前滚动位置
|
||
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||
// 更新附件列表
|
||
fileList.innerHTML = data.html;
|
||
// 重新绑定事件
|
||
document.querySelectorAll('#file-list li').forEach(bindFileEvents);
|
||
// 恢复滚动位置
|
||
window.scrollTo(0, scrollTop);
|
||
// 更新附件数量显示
|
||
updateAttachmentCount();
|
||
// 上传成功后激活附件菜单
|
||
activateAttachmentsMenu();
|
||
} else {
|
||
// 降级方案：刷新整个页面
|
||
window.location.reload();
|
||
}
|
||
} catch(e) {
|
||
window.location.reload();
|
||
}
|
||
} else {
|
||
window.location.reload();
|
||
}
|
||
};
|
||
xhr.onerror = function() {
|
||
window.location.reload();
|
||
};
|
||
xhr.send();
|
||
}
|
||
|
||
// 更新附件数量显示
|
||
function updateAttachmentCount() {
|
||
var attachmentCount = fileList.children.length;
|
||
var tabBtn = document.getElementById('tab-files-btn');
|
||
if (tabBtn) {
|
||
var balloon = tabBtn.querySelector('.balloon');
|
||
if (!balloon && attachmentCount > 0) {
|
||
balloon = document.createElement('span');
|
||
balloon.className = 'balloon';
|
||
tabBtn.appendChild(balloon);
|
||
}
|
||
if (balloon) {
|
||
balloon.textContent = attachmentCount;
|
||
if (attachmentCount === 0) {
|
||
balloon.style.display = 'none';
|
||
} else {
|
||
balloon.style.display = '';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 上传文件
|
||
function uploadFiles(files) {
|
||
if (!files || files.length === 0 || isUploading) return;
|
||
|
||
isUploading = true;
|
||
var total = files.length;
|
||
var completed = 0;
|
||
var successCount = 0;
|
||
var failCount = 0;
|
||
|
||
function checkComplete() {
|
||
if (completed === total) {
|
||
isUploading = false;
|
||
if (successCount > 0 || failCount > 0) {
|
||
var message = '';
|
||
if (successCount > 0 && failCount > 0) {
|
||
message = '已成功上传 ' + successCount + ' 个附件，失败 ' + failCount + ' 个附件。';
|
||
} else if (successCount > 0) {
|
||
message = '已成功上传 ' + successCount + ' 个附件。';
|
||
} else if (failCount > 0) {
|
||
message = '上传失败 ' + failCount + ' 个附件。';
|
||
}
|
||
showNotice(message);
|
||
}
|
||
if (successCount > 0) {
|
||
// 上传成功后刷新附件列表（会自动激活附件菜单）
|
||
refreshAttachmentList();
|
||
}
|
||
}
|
||
}
|
||
|
||
for (var i = 0; i < files.length; i++) {
|
||
(function(file) {
|
||
var formData = new FormData();
|
||
formData.append('file', file);
|
||
|
||
var url = uploadUrl;
|
||
var cid = getCurrentCid();
|
||
if (cid) {
|
||
url = uploadUrl + '?cid=' + cid;
|
||
}
|
||
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open('POST', url, true);
|
||
|
||
xhr.onload = function() {
|
||
completed++;
|
||
if (xhr.status === 200) {
|
||
try {
|
||
var response = JSON.parse(xhr.responseText);
|
||
if (response && response[1] && response[1].cid) {
|
||
successCount++;
|
||
} else {
|
||
failCount++;
|
||
}
|
||
} catch(e) {
|
||
failCount++;
|
||
}
|
||
} else {
|
||
failCount++;
|
||
}
|
||
checkComplete();
|
||
};
|
||
|
||
xhr.onerror = function() {
|
||
completed++;
|
||
failCount++;
|
||
checkComplete();
|
||
};
|
||
|
||
xhr.send(formData);
|
||
})(files[i]);
|
||
}
|
||
}
|
||
|
||
function bindFileEvents(li) {
|
||
// 插入按钮
|
||
var insertBtn = li.querySelector('.insert');
|
||
if (insertBtn) {
|
||
insertBtn.onclick = function(e) {
|
||
e.preventDefault();
|
||
var url = li.getAttribute('data-url');
|
||
var isImage = li.getAttribute('data-image') === '1';
|
||
var title = insertBtn.innerText;
|
||
var textarea = document.querySelector('#text, .wmd-input');
|
||
if (textarea) {
|
||
var insertText = isImage ? '' : '<a href="' + url + '">' + title + '</a>';
|
||
insertAtCursor(textarea, insertText);
|
||
}
|
||
return false;
|
||
};
|
||
}
|
||
|
||
// 删除按钮
|
||
var deleteBtn = li.querySelector('.delete');
|
||
if (deleteBtn) {
|
||
deleteBtn.onclick = function(e) {
|
||
e.preventDefault();
|
||
var cid = li.getAttribute('data-cid');
|
||
if (confirm('确定要删除这个附件吗？')) {
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open('POST', window.location.origin + '/action/upload?do=delete&cid=' + cid, true);
|
||
xhr.onload = function() {
|
||
if (xhr.status === 200) {
|
||
li.remove();
|
||
// 更新附件数量
|
||
updateAttachmentCount();
|
||
// 删除后如果列表为空，保持在附件菜单
|
||
if (fileList.children.length === 0) {
|
||
activateAttachmentsMenu();
|
||
}
|
||
}
|
||
};
|
||
xhr.send();
|
||
}
|
||
return false;
|
||
};
|
||
}
|
||
}
|
||
|
||
function insertAtCursor(textarea, text) {
|
||
if (textarea.selectionStart !== undefined) {
|
||
var start = textarea.selectionStart;
|
||
var end = textarea.selectionEnd;
|
||
textarea.value = textarea.value.substring(0, start) + text + textarea.value.substring(end);
|
||
textarea.selectionStart = textarea.selectionEnd = start + text.length;
|
||
} else if (textarea.createTextRange) {
|
||
var range = textarea.createTextRange();
|
||
range.collapse(true);
|
||
range.pasteHTML(text);
|
||
}
|
||
textarea.focus();
|
||
}
|
||
|
||
// 绑定现有列表项
|
||
document.querySelectorAll('#file-list li').forEach(bindFileEvents);
|
||
|
||
// 更新初始附件数量
|
||
updateAttachmentCount();
|
||
|
||
// 获取上传链接
|
||
var uploadLink = document.querySelector('.upload-file');
|
||
if (uploadLink) {
|
||
// 移除原有的 onclick 属性
|
||
uploadLink.removeAttribute('onclick');
|
||
|
||
// 解绑 jQuery 事件
|
||
if (typeof jQuery !== 'undefined') {
|
||
jQuery(uploadLink).off('click');
|
||
}
|
||
|
||
// 添加新的事件监听
|
||
uploadLink.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
e.stopImmediatePropagation();
|
||
|
||
if (isUploading) {
|
||
return false;
|
||
}
|
||
|
||
if (isSelecting) {
|
||
return false;
|
||
}
|
||
|
||
isSelecting = true;
|
||
|
||
var input = document.createElement('input');
|
||
input.type = 'file';
|
||
input.multiple = true;
|
||
input.setAttribute('multiple', 'multiple');
|
||
input.style.position = 'fixed';
|
||
input.style.left = '-9999px';
|
||
input.style.top = '-9999px';
|
||
input.style.opacity = '0';
|
||
document.body.appendChild(input);
|
||
|
||
var cleanup = function() {
|
||
setTimeout(function() {
|
||
if (input && input.parentNode) {
|
||
input.parentNode.removeChild(input);
|
||
}
|
||
isSelecting = false;
|
||
}, 100);
|
||
};
|
||
|
||
input.onchange = function(e) {
|
||
var files = input.files;
|
||
cleanup();
|
||
if (files && files.length > 0) {
|
||
uploadFiles(files);
|
||
}
|
||
};
|
||
|
||
input.click();
|
||
return false;
|
||
}, true);
|
||
}
|
||
|
||
// 拖放上传
|
||
var uploadArea = document.querySelector('.upload-area');
|
||
if (uploadArea) {
|
||
if (typeof jQuery !== 'undefined') {
|
||
jQuery(uploadArea).off('drop dragover');
|
||
}
|
||
|
||
uploadArea.ondrop = function(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
if (isUploading) {
|
||
return false;
|
||
}
|
||
|
||
var files = e.dataTransfer.files;
|
||
if (files && files.length > 0) {
|
||
uploadFiles(files);
|
||
}
|
||
return false;
|
||
};
|
||
|
||
uploadArea.ondragover = function(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
return false;
|
||
};
|
||
}
|
||
|
||
// 确保初始时如果 URL 包含 #tab-files，激活附件菜单
|
||
if (window.location.hash === '#tab-files') {
|
||
activateAttachmentsMenu();
|
||
}
|
||
})();
|
||
</script>
|