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

开始读取指定Blobor的内容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);
});