Home / Questions / 4779
Accepted
kamome
Asked: 2020-02-26 12:16:41 +0800 CST 2020-02-26 12:16:41 +0800 CST

Javascript 文件阅读器

  • 772

我有以下代码：

 <input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate.toLocaleDateString(), '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

我从读取的文件中获取数据。如何读取内容并将其分配给变量？

我无法理解 FileReader API

javascript

2 Answers

  1. 您缺少的非常简单：为文件定义阅读器，并分配加载时将执行的操作：

      function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    var lectores = new Array(); // los lectores

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate.toLocaleDateString(), '</li>');


        // creas un lector para cada fichero o podría haber problemas
        lectores[i] = new FileReader(); 

        // define qué quieres que ocurra cuando se cargue el contenido
        lectores[i].onload = function(e) {
            var contenido = this.result;
            console.log(contenido); // mostrar por la consola
        }

        // leer cada fichero como texto (esto se ejecuta de manera asíncrona)
        lectores[i].readAsText(f);
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

    重要的是要注意加载是异步完成的（代码将继续正常执行，onload直到文件加载后才会执行）。

    为每个文件使用不同的阅读器也很重要。如果你使用相同的，可能会发生冲突并且脚本会失败（或者结果可能不是你所期望的）。

    在这里我留下一个带有代码的演示（查看控制台查看文件的内容，如果您选择一个非常大的文件可能需要一些时间才能显示内容）：

    function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object
  var lectores = new Array();

  // files is a FileList of File objects. List some properties.
  var output = [];
  for (var i = 0, f; f = files[i]; i++) {
    output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                f.size, ' bytes, last modified: ',
                f.lastModifiedDate.toLocaleDateString(), '</li>');


    lectores[i] = new FileReader();

    lectores[i].onload = function(e) {
      var contenido = this.result;
      console.log(contenido);
    }

    lectores[i].readAsText(f);
  }
  document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
    <input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

    • 3
  2. Best Answer

    在这个例子中你只从文件中提取信息，即元数据。实际上，您不使用FileReader ，而只是使用 File。

    我建议你阅读官方的 w3 API

    您可以查看这个 jsfiddle中的功能（我没有创建它），在测试中您可以上传一个文本文件并在浏览器中查看内容，这就是您想要的。

    主要技巧是询问是否支持 API 并从那里执行异步进程。

    • 1