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

Javascript FileReader

  • 772

I have the following code:

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

I get the data from the file read. How do I read the content and assign it to a variable?

I can't understand the FileReader API

javascript

2 Answers

  1. What you are missing is very simple: define readers for the files, and assign the action that will be executed when it is loaded:

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

    It is important to note that the loading is done asynchronously (the code will continue its normal execution and onloadwill not be executed until the file is loaded).

    It is also important to use a different reader for each file. If you use the same, there could be a conflict and the script would fail (or the result might not be what you expected).

    Here I leave a demo with the code (look at the console to see the content of the files, if you choose a very large file it may take time to display the content):

    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

    In this example you put only extract the information from the file, that is, the metadata. In fact you don't use FileReader just File.

    I recommend you read the official w3 API

    And you can review the functionality in this jsfiddle (I didn't create it), in the test you can upload a text file and see the content in the browser , which is what you want.

    The main trick is to ask if the API is supported and from there execute the Asynchronous process.

    • 1