Question

以下是我的代码

var uploadIDImage = {
    IDPos: {},
    IDNeg: {}
};

var FR = new FileReader();

FR.onload = function(e) {
    console.log("123");
    console.log(e);
    $("#UploadIDPos img").remove();
        $("#UploadIDPos i").hide();
    $('#UploadIDPos').prepend('<img id="IDPosImg" style="width: 140px; height: 80px;"/>');
    var img = document.getElementById('IDPosImg');
  img.src = FR.result;
    uploadIDImage.IDPos.Files = FR.result.split(",")[1];
    console.log("11111");
};

if(e.target.files[0]) {
    FR.readAsDataURL(e.target.files[0]);  
    if(originalIDPosSize === undefined) {
            var size = Math.round(e.target.files[0].size / 1024 / 1024);
            originalIDPosSize = size;
        }
        else {
            totalSize  = totalSize + originalIDPosSize; 
            var size = Math.round(e.target.files[0].size / 1024 / 1024);
        }
        var remainSize = totalSize - size;
        console.log("Remain size : " + remainSize);
        $("#remain-size").text(totalSize - size);
        totalSize = remainSize;
} 

console.log("22222");
console.log(uploadIDImage.IDPos.Files);

我从我的console.log得到的是第一次打印＆＃34; 22222＆＃34;和undefined然后＆＃34; 111111＆＃34;。

为什么＆＃34; 11111＆＃34;不打印？

Answer 1

当你这样做时

FR.onload = function(e) {... }

您正在设置成功完成读取操作时调用的FileReader的回调。

现在您的脚本继续运行并运行console.log("22222");

一段时间后调用回调，你会看到11111。

Answer 2

您的代码段FR.onload = function(e) { ... }只是为FR对象定义处理程序。像FileReader这样的readAsDataURL()方法是异步的 - 您的程序在执行FR.readAsDataURL(...)语句后会继续。

然后，当文件读取完成后，您为FR.onload指定的功能将运行。在console.log("22222");陈述之前或之后是否发生这种情况是不确定的。

FileReader需要更多时间加载吗？

2 个答案: