整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
# txtPreview.js
# 引入jschardet获取文件编码
import jschardet from 'jschardet'
##
# 获取文件的encoding码
# @param {Object File} file input上传的txt文件
# @return {String} encoding 返回文件的编码格式
#
function checkEncoding (file) {
return new Promise((resolve, reject) => {
let reader = new FileReader()
reader.readAsDataURL(file) # 获取txt文件的base64码
reader.onload = function (e) {
let base64Str = reader.result
let str = atob(base64Str.split(';base64,')[1])
let encoding = jschardet.detect(str) # 通过jschardet获取txt文件对应的编码格式
encoding = encoding.encoding
if (encoding === 'window-1252') {
encoding = 'ANSI'
}
resolve(encoding)
}
})
}
##
# 返回file内容
# @param {Object File} file input上传的txt文件
# @return {String} 返回txt文件的内容
#
const txtPreview = (file) => {
return new Promise((resolve, reject) => {
checkEncoding(file).then(encoding => {
let reader = new FileReader()
reader.readAsText(file, encoding) # 通过txt文件编码格式获取文件内容（字符串形式）
reader.onloadend = function (e) {
resolve(reader.result)
}
})
})
}
export default txtPreview
<html>
<body>
<form>
<input type="file" id="files" name="files"/>
</form>
<div id="resText" style="word-wrap: break-word; white-space: divpre-wrap;"></div>
<script>
import txtPreview from './txtPreview.js'
document.getElementById('files').addEventListener('change', handleFileSelect, false);
function handleFileSelect(e) {
let file = e.target.files[0]
txtPreview(file).then(res => {
document.getElementById("resText").innerHTML = res;
})
}
</script>
</body>
</html>
文转载于https://lmangoxx.github.io/tags/FileReader/
如果您看过《HTML是什么？——零基础自学网页制作》这篇教程，请按照其中说明创建一个txt文件。具体过程如下：
step1：在您方便的磁盘中建立一个文件夹，命名为"零基础自学网页制作"。例如我在D盘中建立了"零基础自学网页制作"文件夹。
step2：在文件夹中创建"HTML框架.txt"文件。鼠标移动到空白处点击右键选择"文本文档"。
命名为"html框架"，如下图所示。
如果您的电脑没有显示".txt"后缀的话，请做如下操作：点击"工具"，找到"文件夹选项"
菜单如下：点击"查看选项"。
下拉滑条，找到"隐藏已知文件类型的扩展名"选项，将前面的对勾去掉。
如果您使用的是win10的话请参考《边学边做网页篇------初识HTML》，这也是我做的教程，不过以后都使用这个账号来发了。
step3：把"HTML框架"复制粘贴到"html框架.txt"文件中。HTML框架代码如下：
<!DOCTYPE HTML> <html> <head> </head><body> </body> </html>代码讲解请参照《HTML是什么？——零基础自学网页制作》这篇教程中的讲解。
粘贴后效果如下：使用CTRL+s组合键保存文件。
step4：复制"html框架.txt"文件，更名为"第一个网页.txt"。原始的"html框架.txt"文件为以后备用。
如图所示：
step5：把"第一个网页.txt"的后缀名".txt"改为".html"。
首先将光标放在"第一个网页.txt"文件上，点击右键，选择"重命名"。如图：
选择".txt"
更改为".html",敲击回车键。这时会弹出一个对话框，如图:
大胆的点击"是"即可。
修改后文件是这样的，如图：因为我的默认浏览器是360，所以，".html"文件图标显示为360浏览器的图标，显示其他浏览器的图标也没有问题。
step6：将鼠标移动到"第一个网页.html"文件上，单击右键，选择打开方式，如图：
选择任何一个浏览器打开即可，我使用的是火狐浏览器（Firefox），打开后如图所示：空白一片。
点击键盘F12键，看一下控制台，如图：查看器中已经显示我们的代码框架了。成功！
如果网页是一道菜，那么，html框架我们可以理解为装菜的白盘子，所以我们打开框架时，浏览器显示一片白。下面我们为盘子中加些简单的"菜"。
首先我们为页面添加"标题"
在添加标题前，我们来看一下html框架代码中的内容，在<html></html>标签中有<head></head>和<body></body>两个兄弟标签。
我们在页面中看到的所有的内容都是添加到<body></body>标签中间！
<head></head>标签中的内容并不会显示在页面中。
那么如何添加"标题"呢？
标题在HTML中用<h></h>标签表示。在<h></h>中间加入文字内容即可。如下所示：
<h>第一个页面</h>右键，使用"记事本"打开"第一个网页.html"文件。如图所示：如果您的"打开方式"中没有"记事本"请点击"选择默认程序"
在"其他程序"中找到"记事本"。点击"确定"。从此，"记事本"就一直存在于"打开方式"中了。
我们把这句代码粘贴到<body></body>之间。如下所示：保存后使用浏览器打开。
<!DOCTYPE HTML><html><head> </head> <body> <h>第一个页面</h> </body> </html>然后，使用浏览器打开，如图所示：标题出现在页面中了。
下面，我们来添加段落内容。
段落在HTML中使用<p></p>标签添加。代码如下
<p>千里之行始于足下</p>请各位自行将代码添加到"第一个网页.html"文件中吧！示例代码如下：
<!DOCTYPE HTML> <html> <head> </head> <body> <h>第一个网页</h><p>千里之行始于足下</p> </body> </html>结果如图所示：
通过这个练习，我们可以发现一个规律，在<body></body>中，子元素代码的上下顺序代表了它在页面中显示的排版顺序。
这也简单回答了代码结构与排版的关系，html的标签语句只是标记了它所承载的信息的属性和版面位置。
基于这个特性，html被称为超文本标记语言。
下一期我们具体讨论页面中文字编辑的技巧。
喜欢的小伙伴请加关注，有任何问题请给我留言，欢迎大家给与指正！感激不尽！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
里记录每周值得分享的科技内容，周五发布。
本杂志开源[1]，欢迎投稿[2]。另有《谁在招人》[3]服务，发布程序员招聘信息。合作请邮件联系[4]（yifeng.ruan@gmail.com[5]）。
四川省德阳市使用锈钢板，搭建了一个名为“齿轮花园”的小园林。每个模块都做成正六边形，象征一个齿轮，比喻德阳这个老工业城市的绿色转型。（via[6]）
周刊的《工具》部分，每周都有一些很有用的软件，有些对我的帮助也很大。
《周刊（第254期）》有一个作者自荐的“沉浸式翻译[7]”，就特别有用。
它是一个浏览器插件，主要功能是网页翻译，还可以指定翻译引擎。
但是，对于我最有用的是另一个功能——制作双语 EPUB 电子书。今天就说说这个功能。
很多我想看的国外图书资料，都没有中文版。如果去啃英文原版，就会读得很慢。这时，我们不妨自己动手，生成一个机器翻译版。先读机器译文，如果不顺，再读原文。
举例来说，上个月美国出版了约翰·罗梅洛（John Romero）的自传《DOOM Guy》。
他是经典电子游戏《DOOM》（毁灭战士）的创造者之一。我自从读了《DOOM 启示录》，就对这个人很感兴趣。
但是，此书没有中文版。我就用“沉浸式翻译”，自己做了一本双语对照的 EPUB 电子书。
制作过程非常简单，导入原始 EPUB 文件，启用页面翻译，然后导出就可以了，只花费几分钟。
市面上其他电子书翻译软件，都不如它简单好用，而且它还是免费的。
我已经用它读了好几本原版书，觉得效果不错，很符合我的需要。
不过，它要求原始电子书必须是 EPUB 格式。如果你的资料不是这个格式，可以先用 Calibre[8] 转成 EPUB。
其他格式的文档（HTML、TXT、Markdown 等等），可以通过 Calibre 左上角的“Add books”按钮导入，然后按下“Convert books”按钮，就可以转成 EPUB 格式了。
Calibre 每次只能导入一个文档。如果你想将多个 HTML 文件做成一本电子书，需要上传一个目录页，可以参考官方文档[9]，挺简单的。
以上就是我目前看外文资料的方法，分享给大家。
1、AI 广播[10]
美国俄勒冈州的一家电台宣布，主持人艾什莉每天上午10点至下午3点的节目，将完全由 AI 生成。
AI 根据当天的新闻热点，生成讲稿，然后采用艾什莉的语音朗读播放，中间再配上音乐。这比艾什莉本人来主持更简单便宜，艾什莉以后将专门从事幕后工作。
据说，美国的其他小电台也准备效仿。可以想象，我们以后接触的媒体内容，可能比现在多十倍百倍，而且大部分都是 AI 生成的。
2、奇怪的惠普打印机[11]
一个外国网友买了一台便宜的惠普打印机。
这台机器特别注明，只能使用 WiFi 联机，不能使用 USB。机器背面还有一张贴纸，提醒用户这一点。
奇怪的是，把这张贴纸撕掉，后面赫然就是一个 USB 口。
而且，通过这个 USB 口，可以顺利连接电脑。
很难理解惠普为什么要掩饰这个 USB 口的存在。如果它真想废掉 USB 连接，可以修改硬件模具，也可以修改固件，但是它什么都没做，只是加了一张贴纸。
唯一的解释是，惠普不希望用户离线使用打印机，必须在线使用。一旦连接 WiFi，用户数据就可以回传给惠普。
3、南半球高温[12]
现在，北半球是盛夏，南半球应该是寒冬。问题是，南半球不仅没有寒冬，而且出现了骇人的高温。
进入八月后，智利的气温超过37.8℃，创下历史纪录。阿根廷首都布宜诺斯艾利斯平均气温超过30度，往年则是14.4℃。
全球变暖正在改变南半球的冬季，接下来北半球的冬季会不会也出现高温呢？
4、拖延最久的太空任务[13]
本周四，俄罗斯的探月飞船 Luna 25 发射升空。
它大概是世界上拖延最久的太空任务。它的上一代 Luna 24 是1976年发射的，整整47年之前，此后俄罗斯再没有进行过任何探月活动。
本次太空任务是上个世纪90年代规划的，2010年代开始开发，2021年完成组装和测试，原定2022年发射。最早参与这个项目的人员，很可能现在都已经退休了。
1、手机 App 备案[14]（中文）
工信部宣布[15]，从9月开始推行手机 App 备案（包括小程序），类似现有的网站备案。明年4月起，未备案的 App 不得提供接入。
2、Rhino Linux 介绍[16]（英文）
Rhino 是一个 Linux 发行版，基于 Ubuntu，但是采用滚动更新模式，比较适合同时喜欢这两者的人。
3、Mastodon 驱动的博客评论[17]（英文）
作者介绍了一种新鲜的做法，将 Mastodon 社交网络用作网站评论。它的最大好处是数据开放，不会被第三方控制，因为 Mastodon 是一个开放式、无中心的网络服务。
4、2048位的 RSA 密钥2030年可以破解吗？[18]（英文）
有一种说法，随着计算能力的增长，2048位的 RSA 密钥在2030年将被破解，作者分析这种说法是否可信。
5、Docker Compose 是怎么来的？[19]（英文）
作者是 Docker 的第一批用户，也是最早的 Docker 教程作者之一，他回忆了 Docker 早期是怎么发展而来的。
6、如何使用 Favicon（2023版）[20]（英文）
本文介绍网页的 Favicon 现在应该怎么写。
7、PostgreSQL 如何制作全文搜索引擎[21]（英文）
一篇初学者教程，讲解怎么使用 PostgreSQL 全文搜索功能。
8、Node.js 应用如何利用多核 CPU[22]（英文）
本文是一篇简单教程，使用 cluster 模块或 pm2，让 Node.js 应用充分利用多核 CPU。
1、TypeCell[23]
一个 TypeScript 互动式网页环境，可以在网页文档上直接查看代码运行结果，类似于 Jupyter 笔记本，适合内嵌 TypeScript 代码的文档。
2、小抽屉[24]
安卓 App，可以实现屏幕翻译，方便使用外国 App。（@tuesda[25] 投稿）
3、FoodCa[26]
一个 iOS 应用，基于 chatGPT，实现口语化的输入来记录食物热量，例如“我吃了三颗葡萄”。（@wdkwdkwdk[27] 投稿）
4、抖音聊天（PC 版）[28]
抖音推出的 PC 端聊天软件。（@stefanJi[29] 投稿）
5、麦默笔记[30]（memos）
基于 Web 的个人笔记软件，需要自己搭建服务，可以实现与其他站点的聚合。（@pmxiao[31] 投稿）
6、mdBook[32]
制作电子书的命令行工具，从 Markdown 生成 PDF 和 EPUB 文件，参见教程。（@mzhren[33] 投稿）
7、PDDON[34]
一款开源[35]的在线画图工具，提供低代码和 AI 智能辅助工具。（@pddon[36] 投稿）
8、Ruff[37]
Rust 语言写的 Python Linter，用来检查 Python 代码是否风格正确，运行速度非常快。
9、ReactPy[38]
使用 Python 实现的 React 框架，让你用 Python 写前端 HTML 页面。
10、Wasmer[39]
一个命令行工具，直接在命令行下运行 wasm 模块，参见介绍文章[40]。
11、GoodbyeDPI[41]
这个工具是俄罗斯程序员写的，旨在绕过该国的“深度包检测”（DPI），只适用于 Windows。
1、Claude 2 国内镜像[42]
Anthropic 公司 AI 模型“Claude 2”的非官方国内镜像，可以免费使用，与官网体验一致。（@zengdamo[43] 投稿）
2、AI 导航[44]
该网站收集了各种 AI 站点，并进行了分类。（@zllz5230[45] 投稿）
3、图解 LangChain 的功能模块[46]（中文视频）
LangChain 是目前最流行的生成式 AI 编程框架，作者用一张图讲解它的架构。（@webup[47] 投稿）
4、狄更斯插图库[48]（Charles Dickens Illustrated Gallery）
这个网站收集了英国伟大小说家狄更斯的作品插图。
5、React graph gallery[49]
这个网站提供各种可视化图表（散点图、直方图、折线图等等），你选中自己想要的，它会展示如何用 React + D3.js 实现这个图。
1、上个世纪的档案馆[50]
下面的照片是1937年的捷克斯洛伐克社会局的档案馆。它的墙高达四五米，上面密密麻麻有3000个抽屉。
工作人员都使用电动办公桌，这种桌子可以移动到不同的位置，然后垂直上升到指定高度，一直到天花板。
这种场景即使今天看，都很有科幻色彩。
2、联邦快递 Logo[51]
联邦快递（FedEx）是美国最大的快递公司之一。它的 Logo 初看平淡无奇。
但是，在 E 和 x 之间隐藏着一个指向前方的箭头，暗示快速准确的交付。
1、Nike 运动鞋的由来[52]
上个世纪60年代初，22岁的菲利普·奈特（Phil Knight）刚刚从大学毕业。
在大学里，他是校田径队的短跑运动员，对运动鞋很熟悉。离开学校后，他就开始做运动鞋生意，将便宜的日本运动鞋卖到美国。
他发现一款名为 Tiger 的日本运动鞋，比美国市场上的任何运动鞋都更轻，可以让选手跑得更快。他决定专门进口这种鞋子。
但是没多久，他收到一封信，顿时就让这门生意没法做了。对方声称是 Tiger 运动鞋的美国独家经销商，命令他立刻停止销售，否则就要去法庭告他。
奈特当时还是一个很害羞和瘦弱的青年，无法接受这个消息。
他回忆说：“（它让）我陷入了深深的恐惧之中。每天晚上我都会和家人一起吃晚饭，把妈妈做的烤肉和蔬菜放在盘子里。然后我会和父亲坐在角落里，闷闷不乐地盯着电视。”
他开始考虑转行，放弃运动鞋生意。但在此之前，他想再试一下。
他给制造 Tiger 运动鞋的日本公司 Onitsuka 写了一封信，请求他们改变独家销售授权，允许他在美国销售这款鞋。
他没有得到任何回音。几个月之后，他基本已经放弃了卖鞋。
就这样过了一段日子，他还是不甘心。他后来回忆说：“我很焦虑，对未来感到恐惧，但是不知何故，我产生了一个疯狂的想法，而且越来越坚定。我不想放弃。”
他的疯狂想法就是，自己一个人飞到日本，去找 Onitsuka 公司，面对面说服公司高层，给予他在美国西海岸销售 Tiger 运动鞋的权利。
结果，他真的做到了，对方同意让他销售了。
他的运动鞋店就这样重新开张了，这就是 Nike 公司的由来。
如果奈特面对挫折和对未来的恐惧，放弃销售运动鞋，没有去日本，Nike 公司也就根本不会存在。
1、
所有堆积如山的东西，都是不可预测的。
简化系统的首选方法，就是将一个大系统，转变为多个更小的子系统组成的系统。
-- 《系统、数学和爆炸》[53]
2、
对于任何没有足够财富的人来说，从事科学理论研究事业是一种自私和不负责任的人生选择。
博士后的津贴很低，能够申请的工作岗位很少，通常在长达五年的时间里几乎没有积蓄，积累财富是不可能的，拥有一个家庭也很困难，熬过这个阶段你就已经中年了。
-- Hacker News 读者[54]
3、
世界有两种趋势，一种是自上而下的大数据运算和自动化监控，另一种是自下而上的加密工具和开放货币/信息网络。这两种趋势的互相竞争，决定了世界的发展趋势。
-- 《开放货币和信息网络的影响》[55]
4、
使用 ChatGPT 写一篇 5,000 字的文章和写一篇 500 字的文章几乎一样容易，因此可以预期，文章的平均长度将持续上升，并且商业公司会针对特定的关键字创建更多的内容。
-- 《后 ChatGPT 世界的 SEO》[56]
如何防止帐号被黑（2022 #219）
五菱汽车的产品设计（2021 #169）
降雨量和保险博弈（2020 #119）
做得好 vs 做得快（2019 #69）
（完）
[1] 开源: https://github.com/ruanyf/weekly[2] 投稿: https://github.com/ruanyf/weekly/issues[3] 《谁在招人》: https://github.com/ruanyf/weekly/issues/3324[4] 邮件联系: mailto:yifeng.ruan@gmail.com[5] yifeng.ruan@gmail.com: mailto:yifeng.ruan@gmail.com[6] via: https://lingganlb.com/index/index/detail.html?code=A7883509524180829270[7] 沉浸式翻译: https://immersivetranslate.com/[8] Calibre: https://calibre-ebook.com/[9] 官方文档: https://manual.calibre-ebook.com/faq.html#how-do-i-convert-a-collection-of-html-files-in-a-specific-order[10] AI 广播: https://techcrunch.com/2023/06/14/radio-station-gets-part-time-ai-dj-based-on-its-midday-host/[11] 奇怪的惠普打印机: https://www.theverge.com/2023/8/4/23820710/pay-no-attention-to-the-usb-port-behind-the-no-usb-sticker[12] 南半球高温: https://www.sohu.com/a/708607595_116237[13] 拖延最久的太空任务: https://aviationweek.com/defense-space/space/russias-luna-25-lunar-lander-arrives-vostochny-spaceport[14] 手机 App 备案: https://news.cnstock.com/news,bwkx-202308-5103126.htm[15] 宣布: https://www.gov.cn/zhengce/202308/content_6897437.htm[16] Rhino Linux 介绍: https://linuxiac.com/rhino-linux-unveil-its-first-stable-2023-1-release/[17] Mastodon 驱动的博客评论: https://cassidyjames.com/blog/fediverse-blog-comments-mastodon/[18] 2048位的 RSA 密钥2030年可以破解吗？: https://articles.59.ca/doku.php?id=em:20482030[19] Docker Compose 是怎么来的？: https://brianchristner.io/4000-stars-and-counting-a-trip-down-memory-lane/[20] 如何使用 Favicon（2023版）: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs[21] PostgreSQL 如何制作全文搜索引擎: https://xata.io/blog/postgres-full-text-search-engine[22] Node.js 应用如何利用多核 CPU: https://www.digitalocean.com/community/tutorials/how-to-scale-node-js-applications-with-clustering[23] TypeCell: https://www.typecell.org/[24] 小抽屉: https://play.google.com/store/apps/details?id=com.mydobby.pandora[25] @tuesda: https://github.com/ruanyf/weekly/issues/3328[26] FoodCa: https://apps.apple.com/cn/app/foodca-ai%E5%8A%A0%E6%8C%81%E7%9A%84%E9%A3%9F%E7%89%A9%E7%83%AD%E9%87%8F%E9%80%9F%E6%9F%A5%E4%B8%8E%E8%AE%B0%E5%BD%95%E5%B7%A5%E5%85%B7/id6451112435[27] @wdkwdkwdk: https://github.com/ruanyf/weekly/issues/3330[28] 抖音聊天（PC 版）: https://imdesktop.douyin.com/[29] @stefanJi: https://github.com/ruanyf/weekly/issues/3329[30] 麦默笔记: https://github.com/usememos/memos[31] @pmxiao: https://github.com/ruanyf/weekly/issues/3349[32] mdBook: https://github.com/rust-lang/mdBook[33] @mzhren: https://github.com/ruanyf/weekly/issues/3350[34] PDDON: https://pddon.com/[35] 开源: https://github.com/pddon/pddon-win[36] @pddon: https://github.com/ruanyf/weekly/issues/3351[37] Ruff: https://github.com/astral-sh/ruff[38] ReactPy: https://reactpy.dev/docs/index.html[39] Wasmer: https://wasmer.io/[40] 介绍文章: https://wasmer.io/posts/announcing-wasmer-3.0[41] GoodbyeDPI: https://github.com/ValdikSS/GoodbyeDPI[42] Claude 2 国内镜像: https://www.claudeai.ai/[43] @zengdamo: https://github.com/ruanyf/weekly/issues/3338[44] AI 导航: https://ai.dreamthere.cn/[45] @zllz5230: https://github.com/ruanyf/weekly/issues/3352[46] 图解 LangChain 的功能模块: https://www.bilibili.com/read/cv25333824[47] @webup: https://github.com/ruanyf/weekly/issues/3332[48] 狄更斯插图库: https://www.charlesdickensillustration.org/[49] React graph gallery: https://www.react-graph-gallery.com/[50] 上个世纪的档案馆: https://www.vintag.es/2020/01/central-social-institution-prague.html[51] 联邦快递 Logo: https://www.rd.com/list/secret-messages-company-logos/[52] Nike 运动鞋的由来: https://every.to/superorganizers/fear-courage-and-willingness[53] 《系统、数学和爆炸》: https://pjonori.blog/posts/systems-math-explosions/[54] Hacker News 读者: https://news.ycombinator.com/item?id=35778537[55] 《开放货币和信息网络的影响》: https://www.lynalden.com/open-networks/[56] 《后 ChatGPT 世界的 SEO》: https://www.animalz.co/blog/seo-and-chatgpt/
*请认真填写需求信息，我们会在24小时内与您取得联系。
