用Js将图片转为base64字符串

如题,前台使用js将file表单选中的图片转换为base64字符串,请问该怎么做?
图片说明
这是我在网上找的相关代码,使用firefox调试,每次运行到img.onload就退出去了,进不了function,不知道是哪里有问题,还是压根就写错了。请好心人指点,先谢谢了!

5个回答

bbb是file丢下,没有onload事件,改为onchagne,用HTML5的FileReader对象就可以转为base64了,不需要canvas

而且你bbb已经存在,不需要再append了。。如果是客户端图片预览,看这个: javascript客户端图片预览,兼容最新firefox,chrome和IE11

     img.onchange = function () {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(this.files[0]);
        oFReader.onload = function (oFREvent) {
            alert(oFREvent.target.result);
        };
    }
smartStudent1
csdnFc1123 回复showbo: 就剩1c币了-,-
大约 4 年之前 回复
smartStudent1
csdnFc1123 回复showbo: 看了你那个javascript客户端预览,我终于做出来了,非常感谢!
大约 4 年之前 回复
showbo
支付宝加好友偷能量挖 回复csdnFc1123: 看这个,将图片绘制到canvas后自己调用toDataURL转为base64。http://www.jb51.net/html5/97104.html
大约 4 年之前 回复
smartStudent1
csdnFc1123 回复showbo: 这个this.files[0]获取的是什么啊?就是bbb那个file对象吗?
大约 4 年之前 回复
smartStudent1
csdnFc1123 回复showbo: bbb,aaa已经没用了,
大约 4 年之前 回复
showbo
支付宝加好友偷能量挖 回复csdnFc1123: 我贴的代码就是了。。你的img变量指向bbb,是file对象。file没有onload,只有onchange,如果你想将img对象(aaa)加载的图片转为base64,需要canvas对象,你要搞清楚到底是aaa还是bbb对象先
大约 4 年之前 回复
smartStudent1
csdnFc1123 我还是不太明白啊 ,我不是客户端预览,只需要将转好的base64字符串传到后台就可以了。不要问我为什么不在后台转,我也不知道,这个img和我上面的img是一样的吗?就是file的value?那这个代码怎么触发呢?我不太会js,多指教
大约 4 年之前 回复

问题已经解决了,谢谢!

你找到的网上的代码原先是绑定图片元素的,而不是file类型的Input元素吧?图片元素有onload事件,在图片加载到浏览器的时候触发。file类型的input你绑定onchange事件。
类似楼上的解释,可以参考Image convert to Base64,上面有纯js和jQuery的实现示例代码。

smartStudent1
csdnFc1123 回复save4me: ie8+吧
大约 4 年之前 回复
save4me
save4me 你需要支持哪个版本的IE
大约 4 年之前 回复
smartStudent1
csdnFc1123 恩,代码都是差不多了,但是现在出现了一个问题就是,貌似不支持ie,请问有没有解决的办法了
大约 4 年之前 回复

IE10支持html5的FileReader 。你可以试试开源项目A FileReader polyfill for Internet Explore and Safari using Flash,通过Flash和jQuery来模拟。

请问IE8上,怎么转base64?

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!