文件阅读器需要更多时间来加载

Is FileReader take more time to load?

本文关键字：时间 加载 文件      更新时间：2023-09-26

下面是我的代码

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

我从控制台得到.log首先打印"22222"和未定义，然后打印"111111"。

为什么"11111"不先打印？

当你这样做时 

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

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

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

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

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

稍后，当文件读取完成后，您为 FR.onload 指定的函数将运行。 这是在您的console.log("22222");声明之前还是之后发生的是不确定的。

相关文章：