20241127 给typecho文章编辑附件 添加视频 图片预览

Typecho在写文章时,如果一次性上传太多张图片可能分不清哪张,因为附件没有略缩图,无法实时阅览图片,给文章插入图片时很不方便。

编辑admin/file-upload.php

大约十八行的位置

一个while 循环里面,这是在进行html元素更新操作,在合适的位置插入视频或者图片标签即可.

最终成为这样

复制代码
<?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(); ?>" />
    
    <!-- 视频,图片预览 -->
    <?php if($attachment->attachment->isImage==1): ?>
    <img src="<?php echo $attachment->attachment->url; ?>" width="80%"></src><br/>
    <?php endif; ?>
    <?php if ($attachment->attachment->mime == "video/mp4"): ?>
    <video src="<?php echo $attachment->attachment->url; ?>" width="100%" controls="true"></video><br/>
    <?php endif; ?>

    <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; ?>

当然仅仅是这里还不够,还有admin/file-upload-js.php需要修改,原理差不多

大约103行,额外追加一点代码

复制代码
function fileUploadComplete (id, url, data) {
    let media = ''
    if(data.type==="png"){
        media=' <img src='+data.url+' width="80%"></src><br/>'
    }else if(data.type==="mp4"){
       media=' <video src='+data.url+' width="80%" controls="true"></video><br/>'
    }
    var li = $('#' + id).removeClass('loading').data('cid', data.cid)
        .data('url', data.url)
        .data('image', data.isImage)
        .html('<input type="hidden" name="attachment[]" value="' + data.cid + '" />'
        + media
            + '<a class="insert" target="_blank" href="###" title="<?php _e('点击插入文件'); ?>">' + data.title + '</a><div class="info">' + data.bytes
            + ' <a class="file" target="_blank" href="<?php $options->adminUrl('media.php'); ?>?cid=' 
            + data.cid + '" title="<?php _e('编辑'); ?>"><i class="i-edit"></i></a>'
            + ' <a class="delete" href="###" title="<?php _e('删除'); ?>"><i class="i-delete"></i></a></div>')
        .effect('highlight', 1000);
        
    attachInsertEvent(li);
    attachDeleteEvent(li);
    updateAttacmentNumber();

    if (!completeFile) {
        completeFile = data;
    }
}
相关推荐
百锦再11 小时前
对前后端分离与前后端不分离(通常指服务端渲染)的架构进行全方位的对比分析
java·开发语言·python·架构·eclipse·php·maven
andux19 小时前
layuiadmin与laravel 12 前后端分离nginx配置
php·layui·laravel·layuiadmin
m0_5791466520 小时前
docker desktop的容器间通信
docker·容器·php
007php0071 天前
百度面试题解析:synchronized、volatile、JMM内存模型、JVM运行时区域及堆和方法区(三)
java·开发语言·jvm·缓存·面试·golang·php
KevinLyu1 天前
内存管理篇(一)· zend_alloc 的基本概念
php
星光一影1 天前
大型酒店管理系统源码(多酒店版)
mysql·php
从零开始的ops生活1 天前
【Day 80】Linux-NAS 和 SAN 存储
linux·运维·php
shizhenshide1 天前
为什么有时候 reCAPTCHA 通过率偏低,常见原因有哪些
开发语言·php·验证码·captcha·recaptcha·ezcaptcha
偶尔贪玩的骑士2 天前
Kioptrix Level 1渗透测试
linux·开发语言·网络安全·php
迎風吹頭髮2 天前
Linux服务器编程实践58-getnameinfo函数:通过socket地址获取主机名与服务名
开发语言·数据库·php