Question

有什么方法可以在不通过函数的情况下获取FileReader（）的结果对象？

我在下面做了一个示例代码：

HTML

<br /> <br /> <br />

<div>

</div>

JS

var code = "lorem ipsum";

$("input[type='file']").change(function() {
    var upload = this.files[0];

    var reader = new FileReader();
    reader.onload = function() {
        code = reader.result;
        $("div").append("<label>this should appear first: " + code + "</label> <br />");
    };
    reader.readAsDataURL(upload);

    $("div").append("<label> this should appear last: " + code + "</label> <br />");
});

此代码的问题是跳过reader.onload = ...行，并在脚本的最后一行之后运行。不是通常从上到下读取代码。因此，当运行此代码时，您将收到如下的确切结果：

this should appear last: asd 
this should appear first: data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/7QC+...

请注意this should appear last之前出现this should appear first。

如果根据脚本从上到下阅读，this should appear first必须出现在this should appear last之前。

这是我应用我的结论，reader.onload...行始终被跳过并在脚本结束之前运行。

这是我的困境开始的地方，我需要找到一个替代代码，我不必在reader.onload上使用函数。简单地指定reader.onload = reader.result不起作用。

使用此当前代码，脚本的第一次运行将code返回为lorem ipsum，并在第二次运行时返回data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/7QC+...。但我首次执行脚本后，我需要code为data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/7QC+...。

抱歉，我的理解令人困惑。我不是很喜欢用英语表达自己，因为它不是我的母语。谢谢

Answer 1

FileReader是异步的，因此在等待读取文件时，逻辑执行继续通过加载事件处理程序。这意味着（与任何异步处理程序一样）所有依赖于异步事件的代码都必须放在事件处理程序中。试试这个：

setTimeout(function() {
    $scope.displayErrorMsg = false;
    $scope.$digest();
}, 2000);

setTimeout(function () {
  $scope.$apply(function(){
      $scope.displayErrorMsg = false;
  });
}, 2000);

Answer 2

有什么方法可以获取FileReader（）的结果对象没有通过功能？

没有。 FileReader()是异步的。您可以使用Promise来达到预期的结果

var code = "lorem ipsum";

    $("input[type='file']").change(function() {
      var upload = this.files[0];
      var p = new Promise(function(resolve) {
        var reader = new FileReader();
        reader.onload = function() {
          code = reader.result;
          // pass `div` as resolve `Promise` to `.then()`
          resolve($("div").append("<label>this should appear first: " 
                                  + code + "</label> <br />"));
        };
        reader.readAsDataURL(upload);
      });
      p.then(function(elem) {
        elem.append("<label> this should appear last: " 
                    + code + "</label> <br />");
      })

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="file" />
<div></div>

获取FileReader（）的结果对象

2 个答案: