Question

这真的很奇怪，几小时的谷歌搜索没有找到答案。我试图使用javascript读取本地文件。我只输出文本文件的一些属性，包括第一行，看看它是否正常读取。除了一件事，它似乎正在起作用。当我单击“浏览”按钮，选择一个文件，然后单击“确定”，分配给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部分的脚本标记上方有以下两行：

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

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

Answer 1

以下工作正常。请注意，我将javascript的最后一行移动到页面加载完成后调用的函数中。我在警告框和页面本身都显示了文件的文本。（谷歌浏览器版本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>

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

1 个答案: