javascript - property - FileReader onload con resultado y parámetro

reader.onload javascript

Question

No puedo conseguir tanto el resultado del lector de archivos como algunos parámetros en una función de carga Este es mi código:

HTML de control:

<input type="file" id="files_input" multiple/>

Función de Javascript:

function openFiles(evt){
    var files = evt.target.files;
    for (var i = 0; i < files.length; i++) {
      var file=files[i];
      reader = new FileReader();
      reader.onload = function(){
          var data = $.csv.toArrays(this.result,{separator:''/t''});
      };
      reader.readAsText(file);
    }
  }

Añadir evento:

 files_input.addEventListener("change", openFiles, false);

Yo uso filereader.result , en la función onload . Si utilizo un parámetro, como archivo, para esta función, ya no puedo acceder al resultado. Por ejemplo, me gustaría usar file.name en la función onload. Cómo resolver este problema ?

Answer 1

Como el archivo de variables está dentro del alcance, puede usar la variable de archivo sin pasarlo a la función.

function openFiles(evt){
    var files = evt.target.files;
    for (var i = 0; i < files.length; i++) {
          var file=files[i];    
          reader = new FileReader();
          reader.onload = function(){
              alert(file.name);
              alert(this.result);
          };
      reader.readAsText(file);
    }
  }

files_input.addEventListener("change", openFiles, false);

<input type="file" id="files_input" multiple/>

Answer 2

Debe utilizar el cierre en el controlador ''onload''. Ejemplo: http://jsfiddle.net/2bjt7Lon/

reader.onload = (function (file) { // here we save variable ''file'' in closure
     return function (e) { // return handler function for ''onload'' event
         var data = this.result; // do some thing with data
     }
})(file);

Answer 3

El manejo de eventos es asíncrono y, por lo tanto, recogen el último valor de todas las variables locales incluidas (es decir, el cierre). Para vincular una variable local particular al evento, debe seguir el código sugerido por los usuarios arriba o puede ver este ejemplo funcional:

http://jsfiddle.net/sahilbatla/hjk3u2ee/

function openFiles(evt){
  var files = evt.target.files;
  for (var i = 0; i < files.length; i++) {
    var file=files[i];
    reader = new FileReader();
    reader.onload = (function(file){
      return function() {
        console.log(file)
      }
    })(file);
    reader.readAsText(file);
  }
}

#Using jQuery document ready
$(function() {
  files_input.addEventListener("change", openFiles, false);
});

Answer 4

Intente envolver su función de carga en otra función. Aquí, el cierre le da acceso a cada archivo que se procesa a su vez a través de la variable f :

function openFiles(evt){
    var files = evt.target.files;

    for (var i = 0, len = files.length; i < len; i++) {
        var file = files[i];

        var reader = new FileReader();

        reader.onload = (function(f) {
            return function(e) {
                // Here you can use `e.target.result` or `this.result`
                // and `f.name`.
            };
        })(file);

        reader.readAsText(file);
    }
}

Para una discusión de por qué se requiere un cierre aquí, vea estas preguntas relacionadas:

• Cierre de JavaScript dentro de bucles - ejemplo práctico simple
• ¿Javascript infame problema de bucle?

Answer 5

Para mecanografiado;

for (var i = 0; i < files.length; i++) {
  var file = files[i];

  var reader = new FileReader();

  reader.onload = ((file: any) => {
    return (e: Event) => {
      //use "e" or "file"
    }
  })(file);

  reader.readAsText(file);
}