Filereaderの出力を変数に保存しました

Question

FileReaderの出力をJavaScriptに変数に保存する方法や、FileReaderが出力を返す関数を作成する方法をお聞きしたいと思います。ここで

は、コードのビットでもある：

HTML

<input type='file' id='inputFile'> 
<button id='btn'>Save</button> 

JAVASCRIPT

function imgToBase64(file_input) { 
    if (file_input.files && file_input.files[0]) { 
     var fileReader = new FileReader(); 
     fileReader.onload = function (event) { 
      result = event.target.result; 
      return result // ??? 
     }; 
     fileReader.readAsDataURL(file_input.files[0]); 
    } 
} 

parameter = document.getElementById('inputFile'); 
btn = document.getElementById('btn'); 

btn.onclick = function() { 
    variable = imgToBase64(parameter); //in this variable I would like to store the result from that function 
} 

私がFileReaderのが非同期であることが判明し、私は、コールバックを必要としますか、しかし、私はそのようにする方法を完全に理解していません。

おかげ

Answer 1

あなたは結果を得るためにAngularJSの$q promisesを使用することができます。 imgToBase64関数を作成する場所に$ qを挿入するようにしてください。

function imgToBase64(file_input) { 
    var deferred = $q.defer(); 
    if (file_input.files && file_input.files[0]) { 
     var fileReader = new FileReader(); 
     fileReader.onload = function (event) { 
      result = event.target.result; 
      deferred.resolve(result); 
     }; 
     fileReader.readAsDataURL(file_input.files[0]); 
    } 
    return deferred.promise; 
} 

parameter = document.getElementById('inputFile'); 
btn = document.getElementById('btn'); 

btn.onclick = function() { 
    imgToBase64(parameter).then(function (result) { 
     variable = result; 
    }); 
}