在 Chrome 中加载文件时，FileReader readyState 卡在 1答案

【问题标题】：FileReader readyState is stuck at 1 when loading a file in Chrome在 Chrome 中加载文件时，FileReader readyState 卡在 1
【发布时间】：2018-04-11 22:04:43
【问题描述】：

我在我的网络应用程序中使用 FileReader 来读取用户选择的本地文件，当我 readAsText() 完成后，readyState 应该更改为“2”。这是我的代码：

        var fr = new FileReader(); // readyState is 0
        var filetoload = $("#foo")[0].files[0];
        fr.readAsText(filetoload); // readyState should be 2!!
        var xml = fr.result; 
        localStorage.setItem('foo', xml);

现在在 Firefox 中，一切正常，xml 被写入 localStorage 也很好。如果我在控制台中以静止状态执行此 Chrome（假设在 #foo 输入中指定了一个文件），那么它也可以正常工作。但是，如果我从我的 .jsp 文件中的脚本标记正常运行它，那么在上面的第 3 行之后，readyState = 1 (!)。而且，如果我在第 3 行设置断点，然后尝试从控制台读取 asText()，它也会设置 readyState = 1。

Chrome 在执行过程中需要什么来完全读取文件？我究竟做错了什么？它仅在控制台中处于静止状态时才在 Firefox 和 Chrome 中工作的事实让我相信 Chrome 需要更多的东西来允许这个或其他东西。感谢任何见解，谢谢。

【问题讨论】：

为什么投反对票？

标签： javascript google-chrome filereader

【解决方案1】：

我能够从this post 找到答案。由于读取文件是异步发生的，我想我需要相应地处理。以下是对我有用的。（jsonCall() 只是我们拥有的一个内部函数，基本上调用 $.ajax）我希望这对将来的某人有所帮助。

    $(document).ready(function(){
        $('#foo').on('click', function(e){
            readFile($("[name='filelocation']")[0].files[0], function(e) {
                // use e.target.result in callback...
                var data = { "xml" : e.target.result };
                jsonCall("myservlet", data, function() {
                    window.open(url, "_blank", "height=800,width=1200");
                })
            });
        });
    });

    function readFile(file, onLoadCallback)
        {
        var fr = new FileReader();
        fr.onload = onLoadCallback;
        fr.readAsText(file);
        }

【讨论】：