Question

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

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

Answer 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

Answer 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

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

2 个答案: