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

devtools/2024/11/28 7:27:17/

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


http://www.ppmy.cn/devtools/137599.html

相关文章

【MySQL】数据库的基本认识和使用

为什么要使用数据库呢&#xff1f;我们知道Linux是有文件系统的&#xff0c;为什么不使用文件系统呢&#xff1f; 因为OS只负责把我们交给它的数据存储起来&#xff0c;存到某个文件中&#xff0c;它并不负责管理数据的具体内容&#xff0c;也就是说&#xff0c;我们交给OS什么…

sk_buff 定义及其操作

转载&#xff1a;sk_buff 定义及其操作_skbuf-CSDN博客

试题转excel;试题整理工具;试卷转excel;word转excel

一、问题描述 我父亲是一名教师&#xff0c;偶尔会需要将试卷转excel&#xff0c;方便管理处理一些特别重要的题目 于是&#xff0c;就抽空写一个专门将试题转excel的工具&#xff0c;便于各位教师从业者和教育行业的朋友更好的整理试题&#xff0c;减少一点重复枯燥的工作 …

SpringMVC前后端数据交互

一、JSON格式数据 1、定义 JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式&#xff0c;已被广泛用于数据保存和交换&#xff0c;是迄今为止最为理想的数据交换语言。 JSON 独立于编程语言 层次结构简洁和清晰 易于人阅读和编写&#xff0c;也易于…

【大数据学习 | Spark-Core】RDD的缓存(cache and checkpoint)

1. 单应用缓存&#xff1a;cache 1.1 cache算子 cache算子能够缓存中间结果数据到各个executor中&#xff0c;后续的任务如果需要这部分数据就可以直接使用避免大量的重复执行和运算。 rdd 存储级别中默认使用的算子cache算子&#xff0c;cache算子的底层调用的是persist算子…

网络安全基础之笔记二(传输层安全)

web安全威胁 web流量安全方法 SSL 两层协议组成。会话通过握手协议创建。 会话状态&#xff1a;会话标识符、对等证书、压缩方法、密码规格、主密钥&#xff08;C/S共享的48字节的会话密钥&#xff09;、可恢复性。 连接状态&#xff1a;随机字节串、服务器写MAC密钥、客户端…

【C语言】指针与数组的例题详解:深入分析与高级用法

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C语言 文章目录 &#x1f4af;前言&#x1f4af;题目一详细分析与解答代码逐步解析 &#x1f4af;进一步优化和拓展1. 指针与数组的关系2. 指针运算的注意事项3. 常见的错误和陷阱4. 拓展&#xff1a;指针操作的应用场…

Wireshark常用功能使用说明

此处用于记录下本人所使用 wireshark 所可能用到的小技巧。Wireshark是一款强大的数据包分析工具&#xff0c;此处仅介绍常用功能。 Wireshark常用功能使用说明 1.相关介绍1.1.工具栏功能介绍1.1.1.时间戳/分组列表概况等设置 1.2.Windows抓包 2.wireshark过滤器规则2.1.wiresh…