使用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 是异步的.

开始阅读指定Blob或的内容File.当读取操作完成时,readyState将变为DONE,并且将onloadend调用回调(如果有的话).此时,该result属性包含data:表示文件数据的URL.

将onloadend回调附加到阅读器.

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