获取 FileReader() 的结果对象

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 是行不通的。

使用当前代码，脚本 returns code 的第一个运行为 lorem ipsum，第二个运行 returns data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/7QC+...。但我需要 code 在脚本第一次执行后立即成为 data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/7QC+...。

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

Answer 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);

Answer 2

is there any way i can fetch the result object of a FileReader() without getting through a function ?

没有。 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() 的结果对象

Getting the result object of FileReader()

html

javascript

jquery

filereader