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

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

 var input = $('.mapimage_input').get(0); console.log(input); //  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是异步的。

开始读取指定的Blob或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); });