从下拉框中的选择中读取本地文件并将其显示在文本区域（Javascript/XHTML）中的简单代码答案

【问题标题】：Simple code to read local file from a selection from dropdown box and display it in a textarea (Javascript/ XHTML)从下拉框中的选择中读取本地文件并将其显示在文本区域（Javascript/XHTML）中的简单代码
【发布时间】：2016-11-09 13:38:15
【问题描述】：

我几天来一直在尝试创建一个简单的代码来创建一个可以显示本地目录中的文本文件的页面。这些是规格。

仅限 XHTML/ Javascript
文件是本地文件，并且与主页位于同一目录
文件为txt/日志格式
要从下拉框中选择要显示的文件
文件将显示在文本区域中
兼容所有网络浏览器，不能使用 ActiveXObject

这是我最接近的尝试。

JavaScript

function populate(filename)
{
 var file = document.getElementById('log1').files.(0);
 var reader = new FileReader();
 reader.onload = function(e)
 {
  document.getElementById('myTextarea').value = e.target.result;
 };
 reader.readAsText(file);
}

(X)HTML

<div id="source1">
    <form id="log1">
        Select File from cng1wlsbe1b:<br />
        <select name="file1">
            <option value="CCS1be1" onclick="populate('log1','ACCS1be1.txt')">CCS1be1</option>
            <option value="CCS1beadm1" onclick="populate('log1','cng1wlsbe1bCCS1beadm1.txt')">CCS1beadm1</option>
            <option value="engine_A" onclick="populate('log1','cng1wlsbe1bengine_A.txt')">engine_A</option>
        </select>
    </form>
    <textarea rows="10" id="myTextarea" name="comment" form="log1" style="width:100%"></textarea>
</div>

我刚刚学习了编码，并且一直在从各地获取零碎的代码，所以我很确定它充满了错误。哪位好心人请赐教？

谢谢！

罗宾 :)

【问题讨论】：

来自 MDN：“FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。 "所以文件可以从用户的计算机上读取，而不是从网络服务器上读取。有关示例，请参见此处：developer.mozilla.org/en-US/docs/…

标签： javascript xhtml textarea dropdownbox

【解决方案1】：

我有足够的时间至少让你在一些非常有见地的事情上走上正轨，这些事情会让你的油箱里加油，穿越沙漠。

使用 XHTML5（文件名以 .xhtml 结尾，直到您学会如何使用服务器代码）。 HTML 由 HTML 解析器解析（查看和处理），这类似于军队招募 4channers，但不会有 lulz。 XHTML 由 XML 解析器呈现，它很严格，虽然不完美，但它会（在使用 Firefox 时）告诉你当你重新加载页面时错误是什么以及它位于 的行和列，所以你可以修复现在有问题而不是 lulz-wat-problem？
在 JavaScript 中，当您有一个数组（包含多个项目时，它将使用实心括号。例如 document.getElementById('example)is singular though if you want to usedocument.getElementsByTagName('a)[0] 它将使用 [0] 作为第一个出现，[1] 代表第二个，[2] 代表第三个等等（不带引号）。
在 (X)HTML <element attribute="values" /> 中使用双引号，在 JavaScript 语法中使用单引号，这将为您节省很多的麻烦。也不要介意空格，如果您编码得当，您将使用最少的空格，并且在 JavaScript 和您的服务器（也称为后端）代码中只有一个以上的空格（或更多）。 HTML 是 text/html 而 XHTML only XHTML 如果它被用作 application/xhtml+xml; (X)HTML 是什么版本与媒体类型/mime 无关。
如有疑问，请查看 MDN（Mozilla 开发者网络）。只需将mdn 附加到您的搜索查询中。 https://developer.mozilla.org/en/docs/Web/API/FileReader
永远不要如果你想胜任，就不要使用框架，大多数人无法编写真正的代码，而且你添加的依赖项越多，你的代码就会变得越弱，对第三方的更新就越容易破坏一切...在您的婚礼当天。
使用 WinMerge 将旧代码与新代码进行比较，它是免费软件，我从未停止使用它。
尝试调试任何 JavaScript 代码时，请使用浏览器的开发人员工具（特别是 控制台）。请记住，并非所有错误都会产生输出，静默错误很糟糕，希望您在很长一段时间内不必处理静默错误。
使用 Notepad++ 保存此代码，并确保将其编码为 UTF-8 没有 BOM（字节顺序标记），这只是 UTF-16 所必需的（您不会除非您是印度本地人，否则不要使用它，我认为是）。虽然免费软件没有完美的编辑器，但一旦你习惯了它，你会发现它相当强大，而且不会占用 4GB 的 RAM，这是一个非常可观的平衡。

我已经清理了一般的代码并制作了一个基本的应用程序。我从未使用过本地文本文件...我知道用户必须向客户端发起请求（在测试您的计算机时是客户端和服务器）。用户将必须使用文件输入元素来选择文件在任何事情发生之前。

这是一个相当高深的话题，你可以一开始就接受它，但只要有足够的毅力，你就可以征服它。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Sample XHTML5 Application</title>
<script defer="defer" type="application/javascript">
//<![CDATA[
function populate(filename)
{
 var file = document.getElementById('log1').files[0];
 var reader = new FileReader();
 reader.onload = function(e)
 {
  document.getElementById('myTextarea').value = e.target.result;
 };
 reader.readAsText(file);
}
//]]>
</script>
<style type="text/css">

</style>
</head>

<body>

<form id="log1">
<fieldset>
<p>Select File from cng1wlsbe1b:</p>

<input onclick="populate(document.getElementById('file1').value);" type="button" value="clicky clicky" />
<input id="file_upload" type="file" value="" />

<select id="file1" name="file1">
<option value="CCS1be1" onclick="populate('log1','ACCS1be1.txt')">CCS1be1</option>
<option value="CCS1beadm1" onclick="populate('log1','cng1wlsbe1bCCS1beadm1.txt')">CCS1beadm1</option>
<option value="engine_A" onclick="populate('log1','cng1wlsbe1bengine_A.txt')">engine_A</option>
</select>

<textarea rows="10" id="myTextarea" name="comment" form="log1" style="width:100%"></textarea>
</fieldset>
</form>

</body>
</html>

这不会直接回答您的问题，尽管它会帮助您克服自己面临的挑战几年，并让您与目标保持惊人的距离。祝你好运！

【讨论】：