HTML5 FileReader cómo devolver el resultado?

Uso JS FileReader y necesito tomar el resultado después de la operación de lectura de archivo y manipular con esta información. FileReader se lee de forma asíncrona y no sé, cuando el resultado está listo para usar. ¿Como hacer esto?HTML5 FileReader cómo devolver el resultado?

$(document).ready(function(){ 
    $('#file_input').on('change', function(e){ 
     var res = readFile(this.files[0]); 

     //my some manipulate with res 

     $('#output_field').text(res); 
    }); 
}); 

function readFile(file){ 
    var reader = new FileReader(), 
     result = 'empty'; 

    reader.onload = function(e) 
    { 
     result = e.target.result; 
    }; 

    reader.readAsText(file); 

    //waiting until result is empty? 

    return result; 
}

http://jsfiddle.net/ub22m/4/

Es espectáculo "vacío".

¿Cómo se espere hasta que el "resultado" esté vacio? Otra forma?

Fuente

2012-08-06 trafalgarx

La lectura ocurre asincrónicamente. Es necesario proporcionar una onload devolución de llamada personalizada que define lo que debe suceder cuando la lectura completa:

$(document).ready(function(){ 
    $('#file_input').on('change', function(e){ 
     readFile(this.files[0], function(e) { 
      // use result in callback... 
      $('#output_field').text(e.target.result); 
     }); 
    }); 
}); 

function readFile(file, onLoadCallback){ 
    var reader = new FileReader(); 
    reader.onload = onLoadCallback; 
    reader.readAsText(file); 
}

(Ver la Fiddle.)

Tenga en cuenta que readFile no devuelve un valor. En cambio, acepta una función de devolución de llamada, que se activará siempre que se realice la lectura. La operación $('#output_field').text se mueve a la función de devolución de llamada. Esto garantiza que esa operación no se ejecutará hasta que se active la llamada de onload del lector, cuando se llene e.target.result.

La programación con devoluciones de llamadas es un poco difícil de realizar al principio, pero es absolutamente necesaria para implementar funciones avanzadas.

Fuente

2012-08-06 14:18:46 apsillers

¿Hay alguna diferencia entre los dos 'e's? –

@ChrisChudzicki Sí, son diferentes. La primera 'e' es [jQuery event object] (https://api.jquery.com/category/events/event-object/). La segunda 'e' es [load event object] (https://developer.mozilla.org/en-US/docs/Web/Events/load). – trafalgarx

Aquí está el javascript:

$(document).ready(function() { 
    $('#file_input').on('change', function(e) { 

     function updateProgress(evt) { 
      if (evt.lengthComputable) { 
       // evt.loaded and evt.total are ProgressEvent properties 
       var loaded = (evt.loaded/evt.total); 
       if (loaded < 1) { 
        // Increase the prog bar length 
        style.width = (loaded * 200) + "px"; 
       } 
      } 
     } 

     function loaded(evt) { 
      // Obtain the read file data  
      var fileString = evt.target.result; 
      // Handle UTF-16 file dump 
      $('#output_field').text(fileString); 
     } 
     var res = readFile(this.files[0]); 

     var reader = new FileReader(); 

     reader.readAsText(this.files[0], "UTF-8"); 

     reader.onprogress = updateProgress; 
     reader.onload = loaded; 


    }); 
}); 

function readFile(file) { 
    var reader = new FileReader(), 
     result = 'empty'; 

    reader.onload = function(e) { 
     result = e.target.result; 
    }; 

    reader.readAsText(file); 

    return result; 
}

Y, por supuesto, la parte HTML:

<input type="file" id="file_input" class="foo" /> 
<div id="progBar" style="background-color:black;width:1px;"> </div> 
<div id="output_field" class="foo"></div>

parece funcionar para archivos * .txt.

See this fiddle.

Fuente

2012-08-06 14:12:58

extraña, violín volvió de nuevo a la versión anterior. Corregido ahora. –

return es una palabra clave que creo que se menciona aquí. La función readFile siempre devolverá 'empty' – Urasquirrel

caso de uso FileReader

<html> 
    <head> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"> 
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 
    </head> 
    <body> 
     <script> 
      function PreviewImage() { 
      var oFReader = new FileReader(); 
      oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); 
      oFReader.onload = function (oFREvent) { 
       var sizef = document.getElementById('uploadImage').files[0].size; 
       document.getElementById("uploadPreview").src = oFREvent.target.result; 
       document.getElementById("uploadImageValue").value = oFREvent.target.result; 
      }; 
     }; 
     jQuery(document).ready(function(){ 
      $('#viewSource').click(function() 
      { 
       var imgUrl = $('#uploadImageValue').val(); 
       alert(imgUrl); 
      }); 
     }); 
     </script> 
     <div> 
      <input type="hidden" id="uploadImageValue" name="uploadImageValue" value="" /> 
      <img id="uploadPreview" style="width: 150px; height: 150px;" /><br /> 
      <input id="uploadImage" style="width:120px" type="file" size="10" accept="image/jpeg,image/gif, image/png" name="myPhoto" onchange="PreviewImage();" /> 
     </div> 
     <a href="#" id="viewSource">Source file</a> 
    </body> 
</html>

Fuente

2015-02-19 10:30:03 websky

HTML5 FileReader cómo devolver el resultado?

Respuesta

Cuestiones relacionadas