Question

我已经阅读了这个https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced和许多关于如何使用回调函数的例子，但是当我尝试复制我在示例中看到的内容时，我无法做到正确。

我正在尝试将pdf上传到输入，将上传的数据转换为二进制字符串，然后以某种方式使用该字符串。

问题是我无法使用＆＃34;使用字符串＆＃34;部分等待＆＃34;转换为二进制字符串＆＃34;一部分。

这是我的jsfiddle，有一个问题的例子：

https://jsfiddle.net/97e01nmv/2/

<span>upload pdf here </span><input id="doc_upload" type = "file">

<br><br>

<button id="binary_string_btn">
Get Binary String
</button>

<br><br>

<button id="use_binary_string" style="display: none;">
Do something with the binary string
</button>

<script>

$("#binary_string_btn").click(function() {
  getBase64(document.getElementById("doc_upload").files[0], handleResult);
});

function getBase64(file, callback) {
   var reader = new FileReader();
   var binary_string = reader.readAsDataURL(file);
   callback(binary_string); 
};

function handleResult(binary_string) {
    console.log(binary_string);
    $("#use_binary_string").show();
};

</script>

这就是我期望它发挥作用的方式：

1）用户上传pdf

2）用户点击获取二进制字符串

3）转换函数进行转换，并在完成后调用handleResult

4）handleResult使用二进制字符串

实际发生的事情：

1）用户上传pdf

2）用户点击获取二进制字符串

3）在完成转换之前立即转换函数调用handleResult

4）handleResult尝试使用二进制字符串

Answer 1

Javascript是异步的，因此在读取文件之前会触发回调。

您需要在FileReader的事件中触发回调。请查看文档以获得一个好例子 - https://developer.mozilla.org/en-US/docs/Web/API/FileReader/onload

这样的事情应该这样做 -

function getBase64(file, callback) {
    var reader = new FileReader();
    reader.onload = function(event) {
        callback(event.target.result);
    };
    reader.readAsDataURL(file);
 }

如何使用readAsDataURL（）的回调函数

1 个答案: