无法使用 HTML FileReader 从多个文件中读取数据答案

【问题标题】：Unable to read data from multiple files using HTML FileReader无法使用 HTML FileReader 从多个文件中读取数据
【发布时间】：2016-05-25 06:53:11
【问题描述】：

<input type="file" id="input" multiple onchange="handleFiles(event.target)">
<script language="javascript" type="text/javascript">
     <!--

     function handleFiles(input)
     {
          for (i = 0; i < input.files.length; i++)
          {
              var reader = new FileReader();
              reader.onload = function() 
              {
                  alert(reader.result)
              };
              reader.readAsText(input.files[i]);
          }
      }

     //-->
</script>

我正在尝试显示我上传的一些文件的内容。如果我选择一个文件，它工作正常，但如果我选择多个文件，只显示一个文件的内容，其余都是空白。我做错了什么？

【问题讨论】：

标签： javascript html

【解决方案1】：

您只需稍作修改即可执行以下操作：

<input type="file" id="input" multiple onchange="handleFiles(event.target)">
<script language="javascript" type="text/javascript">
function handleFiles(input)
{
    for (var i = 0; i < input.files.length; i++) { //for multiple files          
        (function(file) {
            var name = file.name;
            var reader = new FileReader();  
            reader.onload = function(e) {  
                // get file content  
                var text = e.target.result; 
                alert(text)
            }
            reader.readAsText(file, "UTF-8");
        })(input.files[i]);
    }
}
</script>

参考：https://stackoverflow.com/a/9815648/3088780

【讨论】：

非常感谢！我之前读过该参考资料，但由于我今天刚开始使用 Javascript，所以无法理解它。我也不明白这一点，但会继续努力，直到我明白为止。目前，问题已解决，谢谢！

【解决方案2】：

我认为 jquery 可以轻松帮助您
HTML：

<script src="jquery-2.2.0.min.js"></script>
<input type="file" multiple="multiple" />
<ul id="output">
</ul>

jquery：

$('input:file[multiple]').change(
    function(e){
        console.log(e.currentTarget.files);
        var numFiles = e.currentTarget.files.length;
            for (i=0;i<numFiles;i++){
                fileSize = parseInt(e.currentTarget.files[i].size, 10)/1024;
                filesize = Math.round(fileSize);
                $('<li />').text(e.currentTarget.files[i].name).appendTo($('#output'));
                $('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last'));
            }
    });

参考来自：https://stackoverflow.com/a/7719334/5566169

【讨论】：