4

我尝试使用 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）。

谢谢！

4

1 回答 1

13

实现的现代浏览器FileReader可以做到这一点。要测试您的浏览器检查是否window.FileReader已定义。

这是我今天早上才写的一些代码来做到这一点。就我而言，我只是将文件拖到此处引用的 HTML 元素上，panel.in1但您也可以使用<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

于 2013-06-04T16:39:27.793 回答