HTML5 FileReader結果を返す方法は？

私はJS FileReaderを使用しています。私はファイルの読み取り操作後に結果を取得し、このデータを操作する必要があります。 FileReaderは非同期で読み込まれ、結果を使用する準備ができたら私は知らない。これを行う方法？HTML5 FileReader結果を返す方法は？

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

それは "空" を示します。

"result"が空になるまで待つ方法は？別の方法ですか？ここで

出典

2012-08-06 trafalgarx

非公開でを読むと、が発生します。

$(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); 
}

（Fiddleを参照してください。）readFileが値を返さないこと

注：あなたは、読み取りが完了したときにどうするかを定義するカスタムonloadコールバックを提供する必要があります。代わりに、コールバック関数を受け取ります。コールバック関数は、読み込みが完了するたびに起動します。 $('#output_field').text操作がコールバック関数に移されます。これにより、e.target.resultが満たされるときに、リーダーのonloadコールバックが起動するまでその操作が実行されなくなります。

コールバックを使用したプログラミングは、最初はやりにくいですが、高度な機能を実装するためには絶対に必要です。

出典

2012-08-06 14:18:46 apsillers

2つの 'e'の間に違いはありますか？ –

@ChrisChudzickiはい、それらは異なっています。最初の 'e'は[jQueryイベントオブジェクト]（https://api.jquery.com/category/events/event-object/）です。 2番目の 'e'は[load event object]（https://developer.mozilla.org/en-US/docs/Web/Events/load）です。 – trafalgarx

は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; 
}

そしてもちろん、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>

は* .txtファイルのために働くようです。

See this fiddle。

出典

2012-08-06 14:12:58

奇妙な、フィドルは戻って古いバージョンに戻りました。今修正されました。 –

リターンは私がここで言及されたと信じているキーワードです。 readFile関数は常に 'empty'を返します – Urasquirrel

ユースケース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>

出典

2015-02-19 10:30:03 websky

HTML5 FileReader結果を返す方法は？

答えて

関連する問題