AI摘要
文章介绍了如何在Typecho中实现附件图片的可视化操作。通过复制粘贴代码并修改admin目录下的文件，可以实现在上传面板中直接显示图片的功能。文章提供了详细的代码示例和效果图，方便用户理解和操作。
复制粘贴代码修改admin目录的如下文件：
file-upload.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 class="files-item" 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>
<!-- 如果文件是图片，则显示图片 -->
<?php if ($attachment->attachment->isImage): ?>
<div class="right">
<p><img src="<?php $attachment->attachment->url(); ?>" alt="<?php $attachment->attachment->name(); ?>" class="typecho-attachment-photo" /></p>
</div>
<?php endif; ?>
</li>
<?php endwhile; ?>
</ul>
</div>
<style>
.files-item{
display: flex;
align-items: center;
justify-content: space-between;
}
.files-item .right img{
width: 60px;
height: 40px;
}
.pasteInput{
width: 75px;
border: 1px solid lightgray
}
</style>效果图：
