我试过使用 javascript 打开文本文件并获取他的名字和内容，所以现在我被困在字符串上，因为我使用输入类型文件来获取目录/路径。
无论如何，我的问题是下一段代码有什么问题，以及如何使用 javascript 获取文本文件内容？
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Display Text Files</title>
<script type="text/javascript">
var str = document.getElementById('txt').value;
function display() {
if (str != "") {
var filename = str.split("/").pop();
document.getElementById('filename').innerHTML = filename;
}
}
</script>
</head>
<body>
<form method="get" action="#" >
<input type="file" accept="text/plain" id="txt" />
<input type="submit" value="Display Text File" onclick="display();" />
</form>
<a href="#" id="filename"></a>
</body>
</html>
编辑:我还想在输入文件中禁用所有文件选项 (*) 到仅文本文件 (.txt)。
谢谢!
最佳答案
现代浏览器实现 FileReader可以做到这一点。要测试您的浏览器，请检查是否 window.FileReader已定义。
这是我今天早上才写的一些代码来做到这一点。在我的例子中，我只是将一个文件拖到此处引用为 panel.in1 的 HTML 元素上。但你也可以使用 <input type="file" /> (请参阅下面的引用资料)。
if (window.FileReader) {
function dragEvent (ev) {
ev.stopPropagation ();
ev.preventDefault ();
if (ev.type == 'drop') {
var reader = new FileReader ();
reader.onloadend = function (ev) { panel.in1.value += this.result; };
reader.readAsText (ev.dataTransfer.files[0]);
}
}
panel.in1.addEventListener ('dragenter', dragEvent, false);
panel.in1.addEventListener ('dragover', dragEvent, false);
panel.in1.addEventListener ('drop', dragEvent, false);
}
它是 reader.onloadend函数获取您在事件处理程序中恢复的文件的文本作为 this.result .
我从 MDN 获得了大部分关于如何执行此操作的机制:https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
关于javascript - 使用javascript获取文本文件内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16922945/