Javascript变量在onload函数内没有改变答案

【问题标题】：Javascript variable not changing inside onload functionJavascript变量在onload函数内没有改变
【发布时间】：2019-08-24 14:22:08
【问题描述】：

此代码总是在警报中返回“3”。

我同时选择了两个文件（一个.mp4 格式和第二个.zip 格式）

    function readFile(input) {
        var counter = input.files.length;
        for(x = 0; x<counter; x++){
            if (input.files && input.files[x]) {
                var extension = input.files[x].name.split('.').pop().toLowerCase();
                var reader = new FileReader();

                reader.onload = function (e) {
                    urlss = 1;
                    if(extension == 'mp4'){
                        urlss = 2;
                    }else{
                        urlss = 3;
                    }
                    alert(urlss);
                };
                reader.readAsDataURL(input.files[x]);
            }
        }
    }

&lt;input type="file" id="files" name="files[]" accept=".png, .jpg, .jpeg, .zip, .mp4" onchange="readFile(this);" multiple /&gt;

【问题讨论】：

我认为urlss = '"2.jpg"; 是问题中的拼写错误？
可以返回数组
能否请您添加完整的相关代码....
@AbhisarTripathi 这是完整的代码。它从输入文件中读取文件。
@icecub 拼写错误。

标签： javascript filereader

【解决方案1】：

那是因为var hoisting

for 结束后调用的onload 函数扩展 == last file extension

尝试用 const 替换 var：

function readFile(input) {
    var counter = input.files.length;
    for(let x = 0; x < counter; x++){
        if (input.files && input.files[x]) {
            const extension = input.files[x].name.split('.').pop().toLowerCase();
            const reader = new FileReader();

            reader.onload = function (e) {
                urlss = 1;
                if(extension == 'mp4'){
                    urlss = 2;
                }else{
                    urlss = 3;
                }
                alert(urlss);
            };
            reader.readAsDataURL(input.files[x]);
        }
    }
}

更新

请查看下面韦伯的评论。

【讨论】：

所以真正的问题实际上是 reader.onload 在每次迭代中都会被覆盖。如果您定义 1 个 FileReader，它有一个 onload 函数，并在该单个文件阅读器上每次迭代运行一次 readAsDataURl 会更好。这个答案为每个读取的文件创建一个单独的文件阅读器。