•  29-09-2019
  •  | 
  •  

Pregunta

Puede alguien darme un ejemplo de uso de la API FileReader ir a buscar contenido de un archivo en cromo?

Parece estar regresando undefined para mí. 

<!doctype html>
<html>
<script>
function handle_files(files) {
  console.log(files)
  reader = new FileReader()
  ret = []
  for (i = 0; i < files.length; i++) {
    file = files[i]
    console.log(file)
    text = reader.readAsText(file) //readAsdataURL
    console.log(text) //undefined
    ret.push(text)
  }
  console.log(ret) // [undefined]

}
</script>
<body>
FileReader Test
<input type="file" onchange="handle_files(this.files)">
</body>
</html>
¿Fue útil?

Solución

Mi problema era que yo asumí FileReader era síncrono. Esta es la forma correcta de hacerlo. Si usted está en el cromo, el código tiene que estar en ejecución en el servidor (host local o en un sitio). No va a trabajar con un archivo local. 

<!doctype html>
<html>
<script>
function handle_files(files) {
  for (i = 0; i < files.length; i++) {
    file = files[i]
    console.log(file)
    var reader = new FileReader()
    ret = []
    reader.onload = function(e) {
      console.log(e.target.result)
    }
    reader.onerror = function(stuff) {
      console.log("error", stuff)
      console.log (stuff.getMessage())
    }
    reader.readAsText(file) //readAsdataURL
  }

}
</script>
<body>
FileReader that works!
<input type="file" multiple onchange="handle_files(this.files)">
</body>
</html>

Otros consejos

El objeto File API FileReader opera de la misma manera en Chrome que en Firefox, Opera o Internet Explorer 10 (Sí, funciona en IE ).

Simple Ejemplo

Se empieza por declarar una nueva instancia del lector: 

var reader = new FileReader();

Definir sus devoluciones de llamada por sus diversas eventos : 

reader.onloadend = function( ){
    document.body.style.backgroundImage = "url(" + this.result + ")";
}

Y luego pasarlo algo para leer: 

reader.readAsDataURL( file );

Violín: http://jsfiddle.net/jonathansampson/K3A9r/

Manejo de múltiples archivos

Cuando se trabaja con varios archivos, las cosas son un poco diferentes. Si bien es claro que necesitamos ciclo sobre la lista de archivos resultante, que también tendrá que utilizar un cierre para evitar que los datos del archivo de conseguir manipulado más numerosas iteraciones: 

// Continue only if we have proper support
if ( window.FileReader ) {

  // Provide our logic upon the change even of our input
  document.getElementById("collection").onchange = function(){

    // Couple variables for handling each file
    var counter = -1, file;

    // Cycle over all files
    while ( file = this.files[ ++counter ] ) {

      // Create a reader for this particular file
      var reader = new FileReader();

      // Respond to the onloadend event of the reader
      reader.onloadend = (function(file){
        return function(){
          var image = new Image();
          image.height = 100;
          image.title = file.name;
          image.src = /^image/.test(file.type) ? this.result : "t9QlH.png";
          document.body.appendChild( image );
        }
      })(file);

      // Begin reading data for this file
      reader.readAsDataURL( file );
    }
  }
}​

Violín: http://jsfiddle.net/jonathansampson/jPTV3/

función de detección

A pesar de FileReader está disponible en casi todos los navegadores modernos, todavía quiere estar seguro de que no causa ningún alboroto para los usuarios en los navegadores antiguos. Antes de utilizar el FileReader, asegúrese de comprobar el objeto de la ventana de su presencia: 

if ( window.FileReader ) {
    // Safe to use FileReader
}

se ejecutan localmente, De Chrome

debe tener en cuenta que la ejecución de este en un file: /// ruta en Chrome dará lugar a una experiencia roto. De manera predeterminada, las versiones actuales de Chrome no permiten file: /// páginas de acceso a otros archivos. Puede cambiar este comportamiento de carga Chrome con el --allow-file-access-from-files bandera .

introducir descripción de la imagen aquí

Nota, este método sólo se permitirá el acceso de archivo para los archivos de la instancia del navegador que se abrió con. Si quieres que este sea el caso para todos los tipos de navegadores en el futuro, podría modificar el acceso directo desde el escritorio. Simplemente haga clic en el acceso directo de Chrome, e ir a propiedades. A continuación, añadir la bandera al final del objetivo.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top