javascript - 使用jquery获取多个文件输入中每个文件的内容

Question

我需要使用 jquery 获取多个文件输入中每个文件的内容，并根据文件内容我需要在页面中进行一些修改。这是我为执行相同操作而编写的代码。这里发生的情况是，如果我选择 3 个文件，我将仅获取第三个文件的内容。如果我使用索引号而不是循环，我可以获取内容，但是如果我使用循环，我将单独获取最后一个文件内容。有人可以向我解释一下这是怎么回事吗？

<input type="file" name="xsd" id="xsd" multiple="multiple">

     $('#xsd').change(function(){  

        input = document.getElementById('xsd');
        for(var i = 0; i < input.files.length ; i++)
        {
        file = input.files[i];
        fr = new FileReader();
        fr.readAsText(file);
        fr.onload = function(e) {
            var filecontent = fr.result;
            // My logic here
        } 
       }
    });

Answer 1

您的问题是 onload 函数从 a closure 获取它的“fr” .

您可以使用immediately-invoked为每个onload回调创建一个单独的闭包。 anonymous function像这样:

$('#file').change(function(){  

    input = document.getElementById('file');
    for(var i = 0; i < input.files.length ; i++)
    {
        (function(i) {
            var file = input.files[i];
            var fr = new FileReader();
            fr.onload = function(e) {
                var filecontent = fr.result;
                // My logic here
            }
            fr.readAsText(file);
        })(i);
   }
});