获取 FileReader() 的结果对象答案

【问题标题】：Getting the result object of FileReader()获取 FileReader() 的结果对象
【发布时间】：2016-02-22 07:29:57
【问题描述】：

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

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

HTML

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

<div>

</div>

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+...。

对不起，我的解释令人困惑。我不太喜欢用英语表达自己，因为它不是我的母语。谢谢

【问题讨论】：

标签： javascript jquery html filereader

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：