使用HTML5 FileReader讀取本地圖像文件到img

Question

我想讀本地圖像文件到img元素。但readAsDataURL()似乎返回「未定義」。我究竟做錯了什麼？

var input = $('.mapimage_input').get(0); 
console.log(input); // <input type="file" class="mapimage_input" accept="image/jpeg"> 
var file = input.files[0]; 
console.log(file); // File {webkitRelativePath: "", lastModifiedDate: Fri Mar 30 2012 12:32:03 GMT+0200, name: "avatar.jpg", type: "image/jpeg", size: 8724…} 
var fr = new FileReader(); 
var img = fr.readAsDataURL(file); 
console.log(img); // undefined 
$('.mapimage_layer').attr('src',img); 

Answer 1

FileReader.readAsDataURL is asynchronous.

開始讀取指定Blob或File的內容。當讀取操作完成時，readyState將變爲DONE，並且將調用onloadend回調（如果有的話）。此時，result屬性包含代表文件數據的data: URL。

將onloadend回調附加到閱讀器。

fr.onloadend = function() { 
    var img = fr.result;     
    console.log(img); 
    $('.mapimage_layer').attr('src',img); 
} 

Answer 2

這對我很好！

function readURL(input) { 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      jQuery('#target').attr('src', e.target.result); 

     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

jQuery("#inputTypeFile").change(function(){ 
    readURL(this); 
});