我正在尝试将本地图像文件读取为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);
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); }
这对我来说很好!!
需要了解更多jQuery教程分享使用HTML5 FileReader将本地图像文件读取为img，都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!
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); });
以上就是jQuery教程分享使用HTML5 FileReader将本地图像文件读取为img相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/jquerytutorial/982364.html