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

原创 黄良钵  2018-05-15 14:24  阅读 29 次 评论 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. })

 

关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情