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:网址。

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

使用HTML5 FileReader将本地图像文件读取为img

2 个答案: