JavaScript通过 new FileReader() 获取图片base64 无组件上传图片

黄良钵

分类: 程序开发 36 0

JavaScript通过 new FileReader() 获取图片base64 无组件上传图片

jQuery无组件上传图片

首先得有个form (可以不用form),再来个input:

  1. <form id="upImg">
  2.     <label for="addImg">
  3.         <i class="iconfont icon-add"></i>
  4.         <input type="file" name="pic" id="addImg" accept="image/*" src="submit.gif" alt="Submit" />
  5.     </label>
  6. </form>

再来看看 js:

  1. // 上传图片
  2. $('#upImg').change(function (e) {
  3.     let file = e.target.files[0]; // 获取图片信息 可以从中获取图片大小
  4.     console.log(file)
  5.     let reader = new FileReader();
  6.     reader.readAsDataURL(file); // 读出 base64
  7.     reader.onloadend = function() {
  8.         // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
  9.         let dataURL = reader.result; // dataURL 为图片 base64 码
  10.         // 下面逻辑处理
  11.     };
  12. })

 

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
JavaScript、new FileReader()、上传图片、图片base64

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “JavaScript通过 new FileReader() 获取图片base64 无组件上传图片”

Loading...