当前位置:首页 > 前端 > es6/js/jQuery技巧

js通过FileReader将本地图片转成base64位

  我们的项目中,经常会有上传文件或者图片之类的功能,这次专门看看上传图片的功能吧,可能刚好项目中碰到的功能比较简单不需要做自定义尺寸裁剪的功能,我们希望能在上传图片到服务器之前实现图片预览,那么中间就可以使用一个JS(Es6)的新对象FileReader,通过它我们可以将本地input file选择的图片转换成base64图形编码。

Html dom:

  1. < input type="file" id="inputId" />
  2. < img id="imgId" alt="" />

Javacript代码:

  1. document.getElementById('inputId').onchange = function() {
  2. var file = this.files[0];
  3. var a = new FileReader();
  4. a.onload = function (e) {
  5. //加载成功后,获取base64
  6. var base64 = e.target.result;
  7. //将base64赋给图片的src
  8. document.getElementById('imgId').src = base64;
  9. }
  10. a.onerror = function(){
  11. console.log("读取图片错误");
  12. }
  13. a.readAsDataURL(file);
  14. }

预览:

IE支持情况:

浏览器 支持性
Internet Explorer(IE7, IE8,IE9) ×
读后有收获可以支付宝请作者喝咖啡
< 上一篇 下一篇 >
文章评论
评论功能改造中...
游客 2020-06-09 11:30:19
可以在onload外面定义个变量,然后将onload里面的变量base64赋值给onload外面的变量吗。
飞哥: 可以的
湘ICP备15005320号-1 似懂非懂 Powered by doyo. 网站地图
返回顶部