3

我希望用户将文件从他们的计算机上传到浏览器，然后将其内容保存为字符串，以便程序的其余部分对其进行解析。我正在查看 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： 有人留下了一个有用的答案，但我想删除了它。我能够更好地遵循此处发布的一些信息，其中解释了如何获取文件的内容，但我仍然遇到一些困难。该链接解释了如何上传文件，然后显示包含文件信息的警报，以及文件内容的子字符串。但是，当它们保存在变量中时，我希望能够看到整个文件的内容。我更改了他们的部分代码以创建一个包含我认为是文件内容的全局变量，但是每当我将它记录到控制台时，即使在上传文件之后，它仍然会记录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并将其复制到全局变量的函数，为什么我不能在外部访问该变量？

4

2 回答 2

0

您的示例日志非常类似于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>

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

于 2013-07-09T10:33:39.647 回答
0

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

var file = this.target;
console.log(file);  //look at what the "target" is
var reader = new FileReader();
于 2013-07-08T17:01:14.333 回答