0

我是 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”并阅读文件

谢谢

4

4 回答 4

3

如何以上述格式显示？

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

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

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

read('data.tsv');

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

window.onload = function () {
    read('data.tsv');
};
于 2013-02-06T22:01:23.163 回答
2

要删除该按钮，只需将调用添加到 JavaScript 的末尾：

    // ...

    read('data.tsv');
</script>

当您在文件中找到数据时，有几种方法可以显示数据。

第一个是将它包装在一个保留空白的元素中......

el.innerHTML = '<pre>' + fname.responseText + '</pre>';

或者您可以用 HTML 替换所有换行符和制表符/空格，例如，可以将换行符转换为<br>标签，并且可以将空格替换为不间断空格：&nbsp;.

您甚至可以通过换行符和空格将其拆分，以便将其显示在表格中，这将是显示您拥有的信息类型的正确方式。

于 2013-02-06T22:01:53.757 回答
1

你必须替换<br>而不是 newline.in 浏览器换行不显示

于 2013-02-06T22:01:25.723 回答
1

关于你应该使用<pre>标签的格式，所以原始格式将被保留，更多细节在这里：http ://www.w3schools.com/tags/tag_pre.asp

并在没有用户干预的情况下运行，使用<body onload="read('data.tsv')">

玩得开心 ！

于 2013-02-06T22:01:47.000 回答