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

本文介绍了使用HTML5 FileReader将本地图像文件读取到img的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

将 onloadend 回调附加到阅读器。

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

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