获取FileReader()的结果对象

问题描述

有什么方法可以不通过函数获取FileReader()的结果对象吗?

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

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

i have made a sample code below:

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 = ...行被跳过并在脚本的最后一行之后立即运行.而不是通常的从上到下的代码阅读.这样，当运行此代码时，您将收到如下准确的结果:

the problem with this code is that the reader.onload = ... line is skipped and is run right after the last line of the script. not the usual top to bottom reading of a code. and so, when this code is run, you will receive an exact result as below:

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

请注意，this should appear last首先出现在this should appear first之前.

notice that this should appear last appears first before this should appear first.

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

whereas as if according to the script if it is read from top to bottom, this should appear first must appear before this should appear last.

在这里我得出我的结论，即reader.onload...行始终被跳过并在脚本结束之前运行.

this is where i apply my conclusion that the reader.onload... line is skipped all throughout and is run before the script ends.

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

this is where my dilemma begins, i need to find an alternative code where i don't have to use a function on reader.onload. simply assigning reader.onload = reader.result does not work.

使用此当前代码，脚本的第一轮运行将code返回为lorem ipsum，在第二轮运行中返回.但是我需要在第一次执行脚本后立即将code设置为.

with this current code, the first run of the script returns code as lorem ipsum and on the second run returns . but i need code to be right after the script is executed on its first time.

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

sorry for my confusing explanation. i am not very fond of expressing myself in english since it is not my native language. thank you

推荐答案

不. FileReader()是异步的.您可以使用Promise获得预期的结果

No. FileReader() is asynchronous. You can use Promise to achieve expected result

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()的结果对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！