HTML5 FileReader come restituire il risultato?

Io uso JS FileReader e mi serve prendere i risultati dopo l'operazione di lettura dei file e manipolare con questi dati. FileReader viene letto in modo asincrono e non lo so, quando il risultato è pronto per l'uso. Come fare questo?HTML5 FileReader come restituire il risultato?

$(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/

E 'spettacolo "vuoto".

Come attendere che il "risultato" sia vuoto? Un altro modo?

fonte

2012-08-06 trafalgarx

La lettura avviene in modo asincrono. È necessario fornire un onload callback personalizzato che definisce cosa dovrebbe accadere quando la lettura 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); 
}

(Vedere la Fiddle.)

noti che readFile non restituisce un valore. Invece, accetta una funzione di callback, che si attiva ogni volta che viene effettuata la lettura. L'operazione $('#output_field').text viene spostata nella funzione di callback. Ciò garantisce che quell'operazione non venga eseguita finché non si attiva il callback onload del lettore, quando verrà riempito il numero e.target.result.

La programmazione con i callback è un po 'difficile da ottenere all'inizio, ma è assolutamente necessario per l'implementazione di funzionalità avanzate.

fonte

2012-08-06 14:18:46 apsillers

C'è una differenza tra i due 'e's? –

@ChrisChudzicki Sì, sono diversi. Il primo 'e' è [oggetto evento jQuery] (https://api.jquery.com/category/events/event-object/). Il secondo 'e' è [load event object] (https://developer.mozilla.org/en-US/docs/Web/Events/load). – trafalgarx

Ecco il 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; 
}

E, naturalmente, 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>

sembra funzionare per i file * .txt.

See this fiddle.

fonte

2012-08-06 14:12:58

strano, violino ritornata alla vecchia versione. Risolto ora. –

return è una parola chiave che credo sia stata menzionata qui. La funzione readFile restituirà sempre 'vuoto' – Urasquirrel

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

fonte

2015-02-19 10:30:03 websky

HTML5 FileReader come restituire il risultato?

risposta

Problemi correlati