2 smartstudent1 smartStudent1 于 2015.07.20 09:33 提问

用Js将图片转为base64字符串

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

7个回答

showbo
showbo   Ds   Rxr 2015.07.20 09:46
已采纳

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

问题已经解决了,谢谢!

save4me
save4me   Ds   Rxr 2015.07.20 11:01

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

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

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

juanyanni
juanyanni   2016.01.14 17:11

请问楼主最后怎么解决的??

juanyanni
juanyanni   2016.01.15 10:56

请问IE8上,怎么转base64?

CSDNXIAOD
CSDNXIAOD   2015.07.20 09:37

Android Base64字符串转换成图片
IOS图片转base64字符串和字符串转回图片
----------------------biu~biu~biu~~~在下问答机器人小D,这是我依靠自己的聪明才智给出的答案,如果不正确,你来咬我啊!

Csdn user default icon
上传中...
上传图片
插入图片