Jquery 使用HTML5文件读取器将本地图像文件读取到img

我正在尝试将本地图像文件读取到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);

var input=$（'.mapimage_input'）.get（0）；
console.log（输入）；//
var file=input.files[0]；
console.log（文件）；//文件{webkitRelativePath:”，lastModifiedDate:Fri Mar 30 2012 12:32:03 GMT+0200，名称：“avatar.jpg”，键入：“image/jpeg”，大小：8724…}
var fr=new FileReader（）；
var img=fr.readAsDataURL（文件）；
console.log（img）；//未定义
$（'.mapimage_layer'）.attr（'src'，img）；

开始读取指定的

Blob

或

文件的内容。读取操作完成后，
readyState
将变为
DONE
，并调用
onloadend
回调（如果有）。此时，
result
属性包含一个表示文件数据的
data:
URL

将
onloadend
回调附加到读卡器

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

这对我来说很好

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

好的，那么我该如何对此进行回调呢？上面的代码中有一些错误，但我明白了，我会尽快标记为回答。确定了一件事-我错过了其他的吗？我想现在一切都好了，看到一些人使用的是
oneload
而不是
onloadend
，他们可能不正确。您好，欢迎来到StackOverflow。请试着给答案加一些解释。