 到文件上传与拖放)
★ FEATURED ARTICLE 教程文档示例工程【免费下载链接】website-archiveArchive of the Coding Train website (first version)项目地址https://gitcode.com/gh_mirrors/we/website-archive点击查看免费下载导读本指南围绕 Programming with Text 课程第 1.4 节 Loading a Text File视频编号 1.42016-09-11 发布展开讲解如何用 p5.js 的loadStrings()函数加载文本文件并借助createFileInput()与拖放drag and drop区域让用户上传自己的文本文件从而把文本输入从文本框拓展到文件级别。读完本文你将掌握 p5.js 中同步/异步加载文本、文件选择器回调、文件类型校验以及文本行拼接显示等一整套可复用实战方案并能在本项目Coding Train 网站归档仓库的示例代码基础上直接运行和改造。为什么需要从文件加载文本在前一节 1.3 文本输入 中我们学会了用 DOM 元素input/textarea配合 p5.dom 库的createInput()获取用户输入的文本。这种方式适合输入少量内容但当文本数据量很大例如整篇文章、语料库、词典时让用户手动键入显然不现实。更常见的场景是程序自带的语料文件如示例中的rainbow.txt用户本地存放的 .txt / .csv 文件从网络 URL 加载文本资源。因此这一节的核心目标是把文本输入升级为文本文件输入在 p5.js 中主要有两条路径加载项目内的文本文件loadStrings()与加载用户本地文件createFileInput()或拖放区域。加载项目内置文本文件loadStrings()loadStrings()是 p5.js 提供的文本文件加载函数官方参考文档原文档中给出的 p5.js 参考链接将其归类为文件输入 API。它从指定路径读取文本文件并把文件的每一行作为数组的一个元素返回。异步加载 回调函数推荐在浏览器中文件读取是异步的因此最常见的用法是传入一个回调函数在文件加载完成后处理数据。示例代码 1-04_loadingTextFile/sketch.js 给出了完整写法function loadFile() { loadStrings(rainbow.txt, fileLoaded); } function fileLoaded(data) { createP(join(data, br/)); }要点解析loadStrings(rainbow.txt, fileLoaded)第一个参数是相对于index.html所在目录的文本文件路径第二个参数是加载完成后的回调函数回调函数接收的data是一个字符串数组data[0]对应第一行data[data.length - 1]对应最后一行join(data, br/)把数组元素用br/连接成一个完整字符串——这里用的是 p5.js 的join()函数原文档姊妹篇 1.5 JavaScript 字符串对象 专门讲解了split()、splitTokens()和join()随后createP()将其渲染为一个p段落。配套的 HTML 中定义了一个触发按钮1-04_loadingTextFile/index.htmlp button idloadfileLoad Rainbow Text/button /p并在setup()中用 p5.js 的 DOM 选择与事件绑定把它接上sketch.jsfunction setup() { noCanvas(); createFileInput(fileSelected); var button select(#loadfile); button.mousePressed(loadFile); }注意这里调用了noCanvas()——因为本示例只处理文本和 DOM 元素不需要canvas这也是 p5.js DOM 模式下的常见做法。同步加载 preload()可选如果你希望加载完成后才开始执行 setup可以把loadStrings()放进preload()中同步使用。仓库中 CC_040.1_wordcounts/P5/sketch.js 是典型示例function preload() { txt loadStrings(rainbow.txt); } function setup() { var allwords txt.join(\n); var tokens allwords.split(/\W/); // ... 统计词频 }在这种用法下preload()会阻塞等待文件加载完毕setup()中即可直接使用txt数组无需回调。它适合程序运行前必须备好全部数据的场景如词频统计、马尔可夫链训练而回调式则适合用户点击后才加载的交互场景。加载多文件与网络资源loadStrings()同样可以加载多个文件或远程 URL。仓库中 CC_040.3_tf-idf/P5/sketch.js 展示了按文件名列表循环加载txt[i] loadStrings(files/ files[i]);CC_057_Earthquake_Viz/P5/sketch.js 则演示了直接加载远程 CSV 数据源用loadStrings()逐行读取地震数据说明该函数在处理结构化数据CSV 按行组织时同样适用。提示由于浏览器同源策略加载本地文件系统上的任意路径可能受限制loadStrings()最适合加载与页面同源的资源或配合本地 HTTP 服务器使用。用户上传自己的文本文件createFileInput()除了加载项目内置文件本节的另一大主题是让用户上传自己的文本文件。p5.js 提供了createFileInput()函数它创建一个input typefile元素并在用户选择文件后触发回调。示例代码中的用法如下sketch.jsfunction fileSelected(file) { createP(file.name file.size file.type); if (file.type text) { createP(file.data); } else { createP(I need a text file.); } }file参数是一个 p5.js 文件对象常用字段包括字段含义示例值file.name文件名含扩展名my-notes.txtfile.size文件大小字节12345file.typep5.js 识别的文件类型text、image、audiofile.data文件内容文本类文件直接可用文件全部文本这个示例的关键设计是类型校验只有file.type text时才显示file.data内容否则输出I need a text file.。这体现了处理用户输入时的防御性编程思路——用户可能拖入图片、音频等非文本文件程序必须优雅处理而非报错。拖放drag and drop区域更自然的输入方式原文档明确指出除了createFileInput()还可以构建一个**拖放区域drag and drop zone**来接收文件。其核心思路是用 p5.js 的 DOM 函数如createDiv()创建一个视觉上的放置区域在该元素上绑定 HTML5 拖放事件dragover与drop在drop回调中阻止浏览器默认行为并通过 p5.js 的loadFile()注意这是 p5.js 对 DOM 文件对象提供的加载方法与loadStrings()不同读取文件内容再交给回调处理。一个典型骨架如下function setup() { noCanvas(); var dropZone createDiv(Drop your text file here); dropZone.size(400, 200); dropZone.style(border, 2px dashed #000); dropZone.dragOver(function() { // 拖拽悬停时的视觉反馈例如高亮边框 }); dropZone.drop(function(file) { // 阻止默认打开文件行为读取内容 file.data 可用于后续处理 }); }实现时要特别注意必须在drop事件回调中调用event.preventDefault()否则浏览器会默认在新标签页中打开被拖入的文件导致整个页面跳转。此外拖入的文件同样应做类型校验file.type text复用与createFileInput()相同的处理逻辑。与下一节的衔接字符串加工管线加载到文本只是第一步。本节示例中已经出现了join(data, br/)而 1.5 JavaScript 字符串对象 将系统讲解 JavaScript 的String对象以及 p5.js 的split()、splitTokens()、join()等文本切分/拼接函数。仓库示例 1-05_StringObject/sketch.js 展示了后续课程中的典型加工方式var words splitTokens(s, , ); words words.sort(); s join(words, ); createP(s);也就是说加载文本文件与处理文本字符串在完整工作流中是前后衔接的两环先用loadStrings()/ 文件上传拿到原始文本行再用split()/join()等函数进行分词、排序、重组。这一节的实战能力为后续的词频统计CC_040.1、马尔可夫链CC_042.2、TF-IDFCC_040.3等 Coding Challenge 打下了数据输入的基础。完整可运行示例把本节的几种输入方式合并可得到如下一个可直接运行的完整示例参照 1-04_loadingTextFile 目录结构index.html通过 CDN 引入p5.min.js与本地sketch.jsindex.htmlhtml head meta charsetUTF-8 script srchttps://cdn.jsdelivr.net/npm/p51.4.1/lib/p5.min.js/script script srcsketch.js/script /head body h1Loading Text from a File/h1 p button idloadfileLoad Rainbow Text/button /p /body /htmlsketch.jsfunction loadFile() { loadStrings(rainbow.txt, fileLoaded); } function fileLoaded(data) { createP(join(data, br/)); } function fileSelected(file) { createP(file.name file.size file.type); if (file.type text) { createP(file.data); } else { createP(I need a text file.); } } function setup() { noCanvas(); createFileInput(fileSelected); var button select(#loadfile); button.mousePressed(loadFile); }运行前提仓库中的示例通过 CDN 加载 p5.jsrainbow.txt约 48 行关于彩虹的科学介绍文本见 rainbow.txt与sketch.js位于同一目录浏览器可直接打开页面但在本地文件系统下加载远程数据时需注意同源策略建议使用本地 HTTP 服务器如python -m http.server或 Node 的静态服务器以获得一致的体验。本节要点总结loadStrings()把文本文件按行读成字符串数组支持回调式运行时加载与preload()同步式启动前加载两种用法join(array, separator)用于把行数组拼接回字符串便于整体渲染或进一步加工createFileInput(callback)生成文件选择器回调中的file对象含name、size、type、data四个关键字段无论是文件选择器还是拖放区域都应做file.type text类型校验保证程序对非文本文件的鲁棒性拖放区域需正确处理dragover/drop事件并阻止浏览器默认行为本节是后续字符串处理split()/join()、词频统计、马尔可夫链、TF-IDF 等项目的数据输入基石。在仓库中你可以进一步查阅同系列 1.3 文本输入 与 1.5 JavaScript 字符串对象以及 Coding Challenge 示例 CC_040.1_wordcounts 和 CC_042.2_markov-chain-names 来观察loadStrings()在实际文本处理项目中的完整用法。赞分享教程文档示例工程【免费下载链接】website-archiveArchive of the Coding Train website (first version)项目地址https://gitcode.com/gh_mirrors/we/website-archive点击查看免费下载相关推荐You-Dont-Need-jQuery 拖放上传原生JS实现文件拖放功能You Dont Need jQuery 拖放上传原生JS实现文件拖放功能 你是否还在为实现文件上传功能而引入庞大的jQuery库是否觉得传统文件选择框不够教程前端ngx-admin 拖拽上传文件拖放与上传进度显示ngx admin 拖拽上传文件拖放与上传进度显示 在企业级后台管理系统开发中文件上传功能是常见需求而拖拽上传结合进度显示能显著提升用户体验。本文将详细介前端UI组件p5.js 拖放文件实战用 DOM 元素打造拖放区域并加载图片Coding Train 8.15 教程详解p5.js 拖放文件实战用 DOM 元素打造拖放区域并加载图片Coding Train 8.15 教程详解 导读 本篇技术指南对应 Coding Trai教程文档示例工程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
