? Editing: Post:21.body Save Upload file Delete Cancel
Content changed Sign & Publish new content

TypeBlog

The dark side of TypeBlog.Net

Follow in NewsfeedFollowing

Latest comments:

Add new post

Title

21 hours ago · 2 min read ·
3 comments
Body
Read more

ZeroBlog 扩展: 更方便的文件上传

on Apr 30, 2016 · less than 1 min read

ZeroNet 已经有了 可选文件 (optional files) 功能,这意味着当站点需要插入图片/文件资源时,可以把文件设为可选,然后插入网站,这样只有当浏览器请求这个文件时,文件才会被从其他节点下载。

但是,要在 ZeroBlog 上使用这个功能,还是比较麻烦。需要手动把文件复制到网站目录下,然后才能在文章中插入。有时候,作为一个懒癌,实在是都懒得动手打开个命令行或文件管理器😂。所以我决定给 ZeroBlog 的文章编辑器添加一个上传文件功能。


由于我是前端渣,所以这一个小功能折腾了有一会儿。效果如图

Screenshot_20160430-153650.png

就是在编辑器的底栏添加了一个 Upload file 按钮。点击后,将会触发浏览器提供的文件选择器。选择文件后将询问是否确认上传,一旦确认,文件就会被添加到网站的 data/res 目录,并以 Markdown 链接或图片的形式插入当前光标处。

要确保图片是可选文件,只需要在 content.json 把整个 data/res 目录加入 optional 列表即可

"optional": "data/res/.*"

每次发布新内容并签名后,ZeroNet 就会自动搞定以前需要手动做的一切工作。

这个功能是利用浏览器的 File API 实现的,所以在古董级浏览器上可能无法使用,我不能也不打算做任何兼容层。由于 FileReader 可以把文件内容以 Data URL 形式输出,其编码方式是 base64, 而 ZeroNet 的 API 又恰好接受 base64 编码后的文件,所以一切都变得简单多了。

上传前需要手动把文件名中的非 ASCII 字符去掉,否则可能失败,我也懒得在代码里做 escape 了 = =

要想使用这个扩展,你只需要把本站的 all.jsindex.html 打包拿走就行了。不过,这只适用于基于官方 ZeroBlog 的博客,对于其他各种修改版,你就不能直接覆盖文件了。不管怎么说,源代码我也已经丢在网站目录里了,可以拿去对照修改。

以上。

15 Comments:

user_name1 day ago
Reply
Body
vperon Aug 26, 2017
Reply

好东西呀。

cnwfjswr01on Jun 08, 2016
Reply

pang: 问个很low的问题。。怎么在android手机上访问zeroNet网站

眼前放弃吧 用户体验太糟糕

pangon May 27, 2016
Reply

问个很low的问题。。怎么在android手机上访问zeroNet网站

cxgreat2014on May 17, 2016
Reply

和您的原版文件相比只是在第2398插入了那些代码而已。。完整文件在这:http://127.0.0.1:43110/cxg2014.bit/js/alla.js 我现在正在正常使用的是这个http://127.0.0.1:43110/cxg2014.bit/js/all.js两个文件除了jQuery版本貌似不一之外其他的。。应该都没事吧。。。

cxgreat2014on May 17, 2016
Reply

话说。。我在用了您的all.js之后在js的相同位置插入ZeroBlog.prototype.reloadPeers = function() {
return this.cmd("siteInfo", {}, (function(_this) {
return function(site_info) {
var peers;
_this.address = site_info.addres;
_this.site_info = site_info;
peers = site_info["peers"];
if (peers === 0) {
peers = "n/a";
}
return $("#peers").removeClass("updating").text(peers);
};
})(this));
};无法使用了。。而且也不报错,怎么回事。。

petercxyon May 02, 2016
Reply

codegeass: 看了一下代码,脑子里突然冒出来一个小白问题……会不会容易导致XSS? 比如模拟发布博文什么的?

这和我加的那点代码有啥关系 = =

codegeasson May 02, 2016
Reply

看了一下代码,脑子里突然冒出来一个小白问题……会不会容易导致XSS? 比如模拟发布博文什么的?

petercxyon May 01, 2016
Reply

imawho: 资磁不过我的博客魔改太多了 只能开比较器去对照修改了

😂其实改动不多2333

imawhoon May 01, 2016
Reply

资磁
不过我的博客魔改太多了 只能开比较器去对照修改了

codegeasson May 01, 2016
Reply

Cool ! Get 了新技能

petercxyon Apr 30, 2016
Reply

p2p: 这里列出一些网站可以给用户贴图,你看看http://127.0.0.1:43110/gfwtalk.bit/?Topic:4_13Z7XxTa7JuFat3KzzMWu3onwM6biLuurJ/

实现起来没什么难度,我本来也想写个评论图片支持的,但是想了一下又没写,因为感觉没啥必要 = =

p2pon Apr 30, 2016
Reply

petercxy: 论坛的话需要实现每个用户的文件上传,稍微有点不一样,因为用户文件就不能直接 siteSign all 了。。
手机上那个菜单拉不出来,我已经去 GitHub 提 issue 了。

这里列出一些网站可以给用户贴图,你看看
http://127.0.0.1:43110/gfwtalk.bit/?Topic:4_13Z7XxTa7JuFat3KzzMWu3onwM6biLuurJ/

petercxyon Apr 30, 2016
Reply

p2p: 滋磁!论坛支持文件上传也是同理?你在手机chrome写博文?是怎样一种体验?手机chrome里那个隐藏菜单能够拉出来吗?

论坛的话需要实现每个用户的文件上传,稍微有点不一样,因为用户文件就不能直接 siteSign all 了。。

手机上那个菜单拉不出来,我已经去 GitHub 提 issue 了。

p2pon Apr 30, 2016
Reply

滋磁!
论坛支持文件上传也是同理?
你在手机chrome写博文?是怎样一种体验?
手机chrome里那个隐藏菜单能够拉出来吗?

This page is a snapshot of ZeroNet. Start your own ZeroNet for complete experience. Learn More