javascript字符串显示在警报框中，但不显示在数组推送中_Javascript_Html

javascript字符串显示在警报框中，但不显示在数组推送中

javascript html

javascript字符串显示在警报框中，但不显示在数组推送中,javascript,html,Javascript,Html,这真的很奇怪，几个小时的谷歌搜索都没有找到答案。我正在尝试使用javascript读取本地文件。我只是输出文本文件的一些属性，包括第一行，看看它是否正在读取它。除了一件事，它似乎在起作用。当我单击Browse按钮，选择一个文件，然后单击Ok，分配给firstLine的javascript字符串将正确显示在警报框中，但不会显示在output.push中。以下是主要代码： function handleFileSelect(evt) { var f = evt.target.files[0]

这真的很奇怪，几个小时的谷歌搜索都没有找到答案。我正在尝试使用javascript读取本地文件。我只是输出文本文件的一些属性，包括第一行，看看它是否正在读取它。除了一件事，它似乎在起作用。当我单击Browse按钮，选择一个文件，然后单击Ok，分配给firstLine的javascript字符串将正确显示在警报框中，但不会显示在output.push中。以下是主要代码：

function handleFileSelect(evt) {
    var f = evt.target.files[0]; // FileList object

    var reader = new FileReader();
    reader.readAsText(f);
    reader.onload = function(e) { 
        var contents = e.target.result;
        var firstLine = contents.substr(0, contents.indexOf("\n"));
        alert( "Got the file\n" 
              +"name: " + f.name + "\n"
              +"type: " + f.type + "\n"
              +"size: " + f.size + " bytes\n"
              +"starts with: " + firstLine       //firstLine correctly shows up here
        );      
        var output = [];
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  ' starts with: '+ firstLine,    //but not here
                  '</li>');
        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
    };
  }
  document.getElementById('files').addEventListener('change', handleFileSelect, false);

我在head部分的script标记上方有以下两行代码：

<input type="file" id="files" />
<output id="list"></output>

另一件奇怪的事情是，如果我把这两行放在我真正想要它们的body部分，输入元素会显示出来，但输出却没有显示任何内容。

下面的操作很好。请注意，我将javascript的最后一行移到了一个函数中，该函数在页面加载完成后调用。我将文件的文本显示在警报框和页面本身中。谷歌Chrome版本32.0.1700.76 m

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}

window.addEventListener('load', mInit, false);

function mInit()
{
  byId('files').addEventListener('change', handleFileSelect, false);
}

function handleFileSelect(evt) {
    var f = evt.target.files[0]; // FileList object

    var reader = new FileReader();
    reader.readAsText(f);
    reader.onload = function(e) { 
        var contents = e.target.result;
        var firstLine = contents.substr(0, contents.indexOf("\n"));
        alert( "Got the file\n" 
              +"name: " + f.name + "\n"
              +"type: " + f.type + "\n"
              +"size: " + f.size + " bytes\n"
              +"starts with: " + firstLine       //firstLine correctly shows up here
        );      
        var output = [];
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  ' starts with: '+ firstLine,    //but not here
                  '</li>');
        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
    };
  }
</script>
<style>
</style>
</head>
<body>
    <input type="file" id="files" />
    <output id="list"></output> 
</body>
</html>

我做了你建议的更改，但仍然得到相同的结果。我也在chrome版本32.0.1700.76 m中尝试过，但也得到了同样的结果。由于你的工作，这让我怀疑它是否与正在读取的文件的大小有关。我的是40万。我刚刚创建了一个2行测试文本文件，事实上，这是有效的。不知道如何使它适用于400K文件。现在这对我来说确实很奇怪。我只是用一个1600x1000px的PNG文件试了一下。该文件为955kb，虽然内容是二进制的，而且显然不会很好地打印，因为页眉中有一个空字符终止输出-它确实会在页面上产生以下输出，以及在消息框bambor.png image/png中产生一些输出-978701字节，最后修改：2013年12月23日开始：�PNG确实很奇怪，书签了。嗯，那一定不是文件大小。以下是有效的输出：test.txt text/plain-25字节，最后修改：2014年1月21日，星期二，以：这是一个测试。。。这里有一个没有：greg_hanowski_ccda.xml text/xml-396277字节，最后修改：2014年1月18日星期六，以：。。。同意，非常奇怪的是xml文件的实际第一行：它正确地显示在警报框中显然是浏览器在解释这一行，而不是逐字打印出来。如果我使用escapefirstLine，那么它将输出：greg_hanowski_ccda.xml text/xml-396277字节，最后修改时间：2014年1月18日，星期六，从：%3C%3Fxml%20version%3D%221.0%22%3F%3E开始