使用HTML5 FileReader将本地图像文件读取到img [英] Read local image file to img using HTML5 FileReader

问题描述

我正在尝试将本地图像文件读取为img元素。但 readAsDataURL（）似乎返回undefined。我做错了什么？

I am trying to read local image file to img element. But readAsDataURL() seems to return "undefined". What am I doing wrong?

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

推荐答案

FileReader.readAsDataURL 是异步的。

FileReader.readAsDataURL is asynchronous.

开始读取指定 Blob 或文件。读取操作完成后， readyState 将变为 DONE ，以及 onloadend 将调用回调（如果有）。那时，结果属性包含一个数据：表示文件数据的URL。

Starts reading the contents of the specified Blob or File. When the read operation is finished, the readyState will become DONE, and the onloadend callback, if any, will be called. At that time, the result attribute contains a data: URL representing the file's data.

将 onloadend 回调附加到阅读器。

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

这篇关于使用HTML5 FileReader将本地图像文件读取到img的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！