- 用Js将图片转为base64字符串
-
如题，前台使用js将file表单选中的图片转换为base64字符串，请问该怎么做？
这是我在网上找的相关代码，使用firefox调试，每次运行到img.onload就退出去了，进不了function，不知道是哪里有问题，还是压根就写错了。请好心人指点，先谢谢了！
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);
};
}
-
- csdnFc1123 回复showbo: 就剩1c币了-，-
- 大约 4 年之前 回复
-
- csdnFc1123 回复showbo: 看了你那个javascript客户端预览，我终于做出来了，非常感谢！
- 大约 4 年之前 回复
-
- 支付宝加好友偷能量挖 回复csdnFc1123: 看这个，将图片绘制到canvas后自己调用toDataURL转为base64。http://www.jb51.net/html5/97104.html
- 大约 4 年之前 回复
-
- csdnFc1123 回复showbo: 这个this.files[0]获取的是什么啊？就是bbb那个file对象吗？
- 大约 4 年之前 回复
-
- csdnFc1123 回复showbo: bbb,aaa已经没用了，
- 大约 4 年之前 回复
-
- 支付宝加好友偷能量挖 回复csdnFc1123: 我贴的代码就是了。。你的img变量指向bbb，是file对象。file没有onload，只有onchange，如果你想将img对象（aaa）加载的图片转为base64，需要canvas对象，你要搞清楚到底是aaa还是bbb对象先
- 大约 4 年之前 回复
-
- csdnFc1123 我还是不太明白啊 ，我不是客户端预览，只需要将转好的base64字符串传到后台就可以了。不要问我为什么不在后台转，我也不知道，这个img和我上面的img是一样的吗？就是file的value？那这个代码怎么触发呢？我不太会js，多指教
- 大约 4 年之前 回复
你找到的网上的代码原先是绑定图片元素的，而不是file类型的Input元素吧？图片元素有onload事件，在图片加载到浏览器的时候触发。file类型的input你绑定onchange事件。
类似楼上的解释，可以参考Image convert to Base64，上面有纯js和jQuery的实现示例代码。
-
- csdnFc1123 回复save4me: ie8+吧
- 大约 4 年之前 回复
-
- csdnFc1123 恩，代码都是差不多了，但是现在出现了一个问题就是，貌似不支持ie，请问有没有解决的办法了
- 大约 4 年之前 回复
IE10支持html5的FileReader 。你可以试试开源项目A FileReader polyfill for Internet Explore and Safari using Flash，通过Flash和jQuery来模拟。