Question

我希望用户将文件从他们的计算机上传到浏览器，然后将其内容保存为字符串，以便程序的其余部分对其进行解析。我正在查看CSV文件，但理论上，我希望这适用于包含某种文本的任何文件。这应该是所有客户端。我没有直接从上传的文件中向服务器发送任何内容。

<html>
<body>
    <input type="file" id="files" />
    <br />
    <input type="button" onclick="click()">

    <script>
        var file = this.target;
        var reader = new FileReader();
        reader.onload = function(event){
        window.text = event.target.result;
        };

        reader.readAsText(file);
        console.log(window.text);

        function click(){
            alert(window.text);
        };
    </script>
</body>
</html>

但即使在我选择了文件后，控制台也始终记录未定义。 onclick函数似乎也不起作用（可能因为内容未定义？）

如何上传带有文本的文件并将其内容保存为字符串作为变量？

编辑1： 有人留下了有用的答案，但我想删除它。我能够更好地遵循发布here的一些信息，这些信息解释了如何获取文件的内容，但我仍然遇到一些困难。该链接说明了如何上传文件，然后显示包含文件信息的警报，以及文件内容的子字符串。但是，我希望能够在将文件保存在变量中时查看整个文件的内容。我改变了部分代码来创建一个包含我认为是文件内容的全局变量，但每当我将其记录到控制台时，即使在上传文件后，它仍会记录undefined。 onclick警报功能也继续不显示。

<input type="button" onclick="click()" />
<input type="file" id="fileinput" />
<script>
    function readSingleFile(event) {
    //Retrieve the first (and only!) File from the FileList object
        var file = event.target.files[0]; 

        if (file){
            var reader = new FileReader();
            reader.onload = function(e) { 
                window.contents = e.target.result;
                alert( "Got the file.n" 
                    +"name: " + file.name + 
                    + "starts with: " + window.contents.substr(1, window.contents.indexOf("n"))
                );  
            }
            reader.readAsText(file);
        }
        else { 
            alert("Failed to load file");
        }
    };

    document.getElementById('fileinput').addEventListener('change', readSingleFile, false);

    document.write(window.contents);
    function click(){
        alert(window.contents);
    };
</script>

如何打印/记录/提醒/等包含文本的变量，以便我以后可以看到如何访问它？尽管使用了一个全局变量，当我尝试在字符串上运行其他函数时，它表示它不能这样做，因为它是undefined。

编辑2： 根据Ray Nicholus的评论，我决定创建一个函数，将onload函数中的文件内容复制到全局变量中，以便可以在函数外部使用。将我的其余程序代码添加到onload函数中几乎是不可能的，需要进行一些重大的重新格式化。

function makeGlobalText(s){
    window.text = s;
};

function readSingleFile(event) {
        var file = event.target.files[0]; 

        if (file){
            var reader = new FileReader();
            reader.onload = function(e) { 
                var contents = e.target.result;
                alert( "Got the file.n" 
                    +"name: " + file.name + 
                    + "starts with: " + contents.substr(1,contents.indexOf("n"))
                );
                makeGlobalText(contents);
            };
            reader.readAsText(file);
        }
        else { 
            alert("Failed to load file");
        }
    };

    document.getElementById('fileinput').addEventListener('change', readSingleFile, false);

然而，当再次尝试记录控制台，打印到屏幕，或在onload函数内调用window.text后使用makeGlobalText(contents)发出警报时，所有内容仍未定义或无响应。这次我可能没有看到一些微不足道的问题。

如果我创建一个从onload中接收字符串并将其复制到全局变量的函数，为什么我不能在外部访问该变量？

Answer 1

脚本没有文件的上下文，您正在调用代码内联。您应该使用更改事件或表单提交。

var file = this.target;
console.log(file);  //look at what the "target" is
var reader = new FileReader();

Answer 2

您的示例日志与http://www.htmlgoodies.com/beyond/javascript/read-text-files-using-the-javascript-filereader.html

非常相似

也许你应该看看：

<input type="file" id="fileinput" />
<script type="text/javascript">
  function readSingleFile(evt) {
  //Retrieve the first (and only!) File from the FileList object
  var f = evt.target.files[0]; 

  if (f) {
    var r = new FileReader();
    r.onload = function(e) { 
        var contents = e.target.result;
      alert( "Got the file.n" 
            +"name: " + f.name + "n"
            +"type: " + f.type + "n"
            +"size: " + f.size + " bytesn"
            + "starts with: " + contents
      );  
    }
    r.readAsText(f);
  } else { 
    alert("Failed to load file");
  }
}

document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
</script>

我在“start with：”之后删除了子串调用，因此您可以看到整个文件

HTML 5 File API在浏览器中上传文件并将内容保存为字符串

2 个答案: