javascript - 在 JavaScript 中读取文件

Question

我是 javascript 新手，正在尝试读取文件并在浏览器上显示其内容。

到目前为止我有这个代码:

<script type="text/javascript">
        var fname ;
        if(navigator.appName.search('Microsoft')>-1) { fname = new ActiveXObject('MSXML2.XMLHTTP'); }
        else { fname = new XMLHttpRequest(); }

        function read(filename) {
            fname.open('get', filename, true);
            fname.onreadystatechange= steady;
            fname.send(null);
        }

        function steady() {
            if(fname.readyState==4) {
                var el = document.getElementById('read_file');
                el.innerHTML = fname.responseText;
            }
        }
    </script>

但是我得到的输出是:

x   y 5 90 25   30 45   50 65   55 85   25

而数据的格式为:

 x    y
 5    90
 25   30   
 45   50   
 65   55 
 85   25

两个问题:

1)如何按照上面的格式显示

2)到目前为止，当我单击按钮时就会发生这种情况..有什么方法可以自动从此给定文件中读取而不是单击按钮

这就是我的 html 代码的样子

<input type="button" value="load file"  onclick="read('data.tsv')">

我想摆脱这个“onclick”并只读取文件

谢谢

Answer 1

How do I display it in the format as above?

确保您插入内容的元素使用 white-space: pre用于造型，否则空间会被压缩。另外，请注意特殊字符，例如 < , > , " ，和&需要转义才能与 innerHTML 一起使用。通常<pre>当必须保留间距时使用元素。

As of now, this happens when I click on a button.. is there any way I can automatically read from this given file rather than clicking on a button

如果<script>在 #read_file 之后执行元素，您可以简单地调用该函数:

read('data.tsv');

如果没有，您可以设置 onload页面加载完成时将执行的事件处理程序:

window.onload = function () {
    read('data.tsv');
};