如何读取javascript变量中的文件内容?

2024-01-11

我有一个小脚本,用于在每 4 个字符之后分割“var foo”内的文本。它运行良好。 但我的实际数据位于文本文件“a.txt”中。如何将整个文件文本放入“var foo”中。并将分割输出写入另一个文本文件?

var foo = "this is sample text !!!"; 
var arr = [];
for (var i = 0; i < foo.length; i++) {
    if (i % 4 == 0 && i != 0)
        arr.push(foo.substring(i - 4, i));
    if (i == foo.length - 1)
        arr.push(foo.substring(i - (i % 4), i+1));          
}
document.write(arr);
console.log(arr);

要获取文件的内容,您需要使用输入标签选择文件。

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <input id="input" type="file" accept="text/plain">
  <script src="script.js"></script>
</body>

读取文件内容的好时机是在更改事件中。

const input = document.querySelector("#input");

input.addEventListener("change", () => {
  const file = input.files.item(0);
});

要将文件内容作为字符串读取,您需要对其进行转换。

function fileToText(file, callback) {
  const reader = new FileReader();
  reader.readAsText(file);
  reader.onload = () => {
    callback(reader.result);
  };
}

文件的内容作为字符串将可供回调函数使用。您可以创建一个链接并使用单击事件将字符串下载到文本文件中。

function save(content, fileName, mime) {
  const blob = new Blob([content], {
    tipe: mime
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = fileName;
  a.click();
}

这是完整的代码

const input = document.querySelector("#input");

input.addEventListener("change", () => {
  const file = input.files.item(0);
  fileToText(file, (text) => {
    save(text, "fileName.txt", "text/plain");
  });
});

function fileToText(file, callback) {
  const reader = new FileReader();
  reader.readAsText(file);
  reader.onload = () => {
    callback(reader.result);
  };
}

function save(content, fileName, mime) {
  const blob = new Blob([content], {
    tipe: mime
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = fileName;
  a.click();
}
<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <input id="input" type="file" accept="text/plain">
  <script src="script.js"></script>
</body>

您可以在此处阅读有关在 JavaScript 中操作文件的更多信息:https://www.html5rocks.com/en/tutorials/file/dndfiles/ https://www.html5rocks.com/en/tutorials/file/dndfiles/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何读取javascript变量中的文件内容? 的相关文章

  • 仅当表单已提交时才触发 jQuery 表单验证?

    不引人注目的验证基于这样的想法 don t进行表单验证 直到用户提交表单 一旦发生这种情况 如果表单上的某些内容无效 那么一旦用户更改了每个字段 就会立即验证它 我想做的是 不显眼地 触发表单元素的验证 也就是说 only如果用户已尝试提交
  • 如果对象包含在另一个数组中,则从数组中删除该对象

    我试图从数组中删除一个对象 如果该对象的属性 唯一 包含在另一个数组中 我知道我可以像这样执行嵌套 for 循环 for i 0 i lt array length i for j 0 j lt array2 length j if arr
  • Angular 2 链式 Promise 并传递拒绝

    应该是一个简单的问题 但是我找不到有关如何做到这一点的文档 像这样链接一个承诺 Making a promise no problem let promise new Promise resolve reject gt let data d
  • 网站 YouTube 嵌入视频不断播放

    我正在使用 youtube 提供的 iframe 在我的网站上嵌入视频 我还使用了一个 css 弹出窗口 这是我从这个页面学到的http www pat burt com web development how to do a css po
  • VBA / HTML / jQuery 选择自动完成 - 在列表中选择

    我正在尝试使用 Excel 中的 VBA 在网站的列表中选择一个值 这不是一个 正常列表 该网站使用 jQuery 选择自动完成 如下所示 example http davidwalsh name demo jquery chosen ph
  • 非 DOM 对象上的 jQuery 自定义事件

    我最近阅读了一些代码 其功能如下 bob name Bob Smith rank 7 bob bind nameChanged function bob trigger nameChanged 这似乎有效 但我在 jQuery 文档或源代码
  • 在Javascript中按降序对字符串进行排序(最有效)?

    W3Schools 有这个例子 var fruits Banana Orange Apple Mango fruits sort fruits reverse 这是在 Javascript 中按降序对字符串进行排序的最有效方法吗 Updat
  • 在闪亮的数据表中为每个单元格显示工具提示或弹出窗口?

    有没有什么方法可以为 r闪亮数据表中的每个单元格获取工具提示 有很多方法可以获取悬停行或列 但我找不到一种方法来获取行和列索引并为每个单元格显示不同的悬停工具提示 任何人都可以修改以下代码吗 library shiny library DT
  • 通过 node-http-proxy 保留基于 cookie 的会话

    我有一个简单的基于 Express 的 Node js Web 服务器 用于开发 JavaScript 应用程序 我将服务器设置为使用 node http proxy 来代理应用程序向在不同域和端口上运行的 Jetty 服务器发出的 API
  • Google Chrome 106 可拖动导致元素消失

    使用拖放元素时 绝对定位元素中包含的大多数其他元素都会从屏幕上消失 如果我调整窗口大小 这些元素会出现 但在开始拖动时会再次消失 我在最新版本的 Google Chrome 106 和 Beta 版本 107 0 5304 18 以及现在的
  • 如何流式传输 OpenAI 的完成 API?

    我想流式传输结果通过 OpenAI 的 API 完成 https beta openai com docs api reference completions 该文档提到使用服务器发送的事件 https developer mozilla
  • JS用正则表达式替换数字

    我有元素的标识符 如下所示 form book 1 2 3 我想要的是用其他值替换该标识符中的第二个数字 我将函数 match 与以下正则表达式一起使用 var regexp d d d 但它返回我包含的数组 1 2 3 2 因此 当我尝试
  • 淡出和循环一组 div 的最佳方式

    假设我有以下 div div class a You are funny div div class b You are smart div div class c You are cool div 最好的展示方式是什么div a持续 5
  • Chartjs刻度标签位置

    尝试让 Y 轴刻度标签看起来像image https i stack imgur com XgoxX png 位于秤顶部且不旋转 缩放选项当前如下所示 scales yAxes id temp scaleLabel display true
  • Select2 下拉列表动态添加、删除和刷新项目

    这让我发疯 为什么 Select2 不能在其页面上实现清晰的方法或示例如何在 Select2 上进行简单的 CRUD 操作 我有一个 select2 从 ajax 调用获取数据
  • JavaScript onresize 事件多次触发

    我在尝试仅在触发 onresize 事件时运行一次函数时遇到一些麻烦 我已经看过这个问题DOM onresize 事件 https stackoverflow com questions 1500312 javascript onresiz
  • 数据表日期范围过滤器

    如何添加日期范围过滤器 like From To 我开始进行常规搜索和分页等工作 但我不知道如何制作日期范围过滤器 我正在使用数据表 1 10 11 版本 My code var oTable function callFilesTable
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 在 Javascript 中减少/分组数组

    基于this https stackoverflow com a 40774906 3254598例如 我想以稍微不同的方式按对象进行分组 结果应该如下 key audi items make audi model r8 year 2012
  • 如何在 gulp.src 中使用基本正则表达式?

    我正在尝试选择两个文件gulp src highcharts js and highcharts src js 当然 我知道我可以使用数组表达式显式添加这两个表达式 但出于学习目的 我尝试为它们编写一个表达式 我读过可以使用简单的正则表达式

随机推荐

  • 以编程方式更改 Google 翻译下拉菜单

    在一个网站上 我尝试使用以下代码添加谷歌翻译下拉列表 function googleTranslateElementInit new google translate TranslateElement pageLanguage en goo
  • Facebook“点赞按钮”返回 X-Frame-Options Deny

    我正在尝试在博客的每篇文章上添加一个 Facebook 的 点赞按钮 代码粘贴正确 但我收到此错误 Refused to display https www facebook com undefined plugins like php a
  • 用于 32 位 x86 汇编的 DOS 调试程序

    你们中的许多人可能还记得古老的 DOS 程序 debug 尽管它在很多方面都已经过时 但它的好处之一是 人们可以轻松地找到给定指令的字节序列 而无需经历编写程序 编译 反汇编 检查文件内容等步骤 输入指令 然后转储指令地址 遗憾的是 调试
  • 滚动直到元素可见 iOS UI Automation with Xcode 7

    因此 通过新的 Xcode 更新 Apple 改变了我们进行 UI 测试的方式 在工具中 我们使用java脚本函数 isVisible 来确定我们的目标元素是否可见 我正在尝试在 Objective C 中复制它 但我似乎找不到与之等效的东
  • 管道中的控制台输出:Jenkins

    我创建了一个复杂的管道 在每个阶段我都称之为工作 我想查看 Jenkins 某个阶段中每个作业的控制台输出 如何获得 从构建步骤返回的对象可用于查询日志 如下所示 pipeline agent any stages stage test s
  • 为什么我不能在具有类型参数的特征上添加一揽子实现?

    考虑这两个特征 pub trait Foo fn new arg u32 gt Self pub trait Bar p Foo fn with parameter arg u32 parameter P gt Self 我想添加毯子暗示
  • Push Segue 在 iOS 5 中不起作用

    我对 IOS 非常陌生 我正在使用情节提要功能来创建应用程序 这就是我想要的 我有两个视图控制器 一个 ViewController 和两个 ViewController 我在一个 ViewController 中有一个按钮 O 按住 ct
  • 迭代通过域模型上的 linq 查询返回的对象的属性和值

    我在关系数据库中有一个自定义实体 我已通过域模型将其映射到 CLR 因此 通过使用以下语句 我可以通过域模型上的 LINQ 查询将实体从数据库拉入内存 如下所示 var inspection from i in dbContext New
  • 在 swift 中将 JSON 对象解析为字符串数组

    我有以下 Json 响应 language en textAngle 0 orientation Up regions boundingBox 96 29 244 474 lines boundingBox 96 29 58 12 word
  • 使用字符串/分类特征(变量)进行线性回归分析?

    回归算法似乎正在研究以数字表示的特征 例如 该数据集不包含分类特征 变量 如何对这些数据进行回归并预测价格是非常清楚的 但现在我想对包含分类特征的数据进行回归分析 有5特征 District Condition Material Secur
  • -1 * int.MinValue == int.MinValue??这是一个错误吗?

    在 C 中我看到了 1 int MinValue int MinValue 这是一个错误吗 当我尝试实现搜索树时 它真的把我搞砸了 我最终使用了 int MinValue 1 这样我就可以正确地否定它 这不是一个错误 int MinValu
  • Java在C中的易失性?

    我知道使用volatile在爪哇 即 基于维基百科文章 http en wikipedia org wiki Volatile variable 对易失性对象的读取和写入存在全局顺序 多变的 这意味着每个访问易失性字段的线程 将在继续之前读
  • 如何使用 python/distutils 依赖系统命令?

    我正在寻找最优雅的方式来通知我的库的用户他们需要特定的 unix 命令来确保它能够工作 什么时候是我的库提出错误的最佳时间 安装 当我的应用程序调用命令时 在导入我的库时 both 还有你应该如何检测命令是否丢失 if not comman
  • 查看模板代码标签 - asp.net mvc - regd

    在 asp net MVC 视图引擎上下文中 和 之间有什么区别 在MVC2书中给出如下 代码块在视图模板呈现时执行代码 代码块执行其中包含的代码 然后将结果呈现到模板的输出流 什么时候使用第一个 什么时候使用第二个 这本书几乎是正确的 代
  • findViewById(R.id.content) 和 getRootView() 之间的区别[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions findViewById R id
  • log4j2配置中RollingFile和RollingRandomAccessFile有什么区别

    在我们当前的实现中 其中一台服务器具有为 RollingRandomAccessFile 和另一个 RollingFile 设置的 log4j2 配置 如果可能的话 我想知道两者之间的区别以及各自的优缺点 Thanks 主要区别在于性能 h
  • 如何将拉取请求合并到我的 github 项目的功能分支中?

    有人通过 fork 向我的 GitHub 项目提交了拉取请求 我不想直接合并到 master 中 而是更愿意将更改合并到功能分支中 以便我可以在将最终产品合并到 master 之前进行一些小的编辑 如果可能的话 我希望 GitHub 向提交
  • 'c:/wamp64/bin/php/php7.0.10/ext/php_oci8_12c.dll' - %1 不是有效的 win32 应用程序

    为了从 php 访问远程 Oracle 数据库 我必须激活扩展php oci8 12c 但是当我这样做时 它不会出现在phpinfo 另一方面 我在 php 日志中收到错误消息 13 Jan 2017 08 39 48 UTC PHP 警告
  • 更改 MS Access 元素的默认样式

    当我向表单添加任何元素 如文本框 标签等控件 时 它的默认样式为 字体 Calibri 详细 字体大小 11 前景色 文本 2 浅 40 怎么可能改变这一点 我需要 MS Sans Serif 8 黑色作为默认值 Thanks 在 Acce
  • 如何读取javascript变量中的文件内容?

    我有一个小脚本 用于在每 4 个字符之后分割 var foo 内的文本 它运行良好 但我的实际数据位于文本文件 a txt 中 如何将整个文件文本放入 var foo 中 并将分割输出写入另一个文本文件 var foo this is sa