<input id="file" type="file">
<img id="img" style="max-height: 300px;">
<textarea id="textarea" style="width: 100%;height: 300px;"></textarea>
<script>
$("#file").change(function () {
  run(this, function (data) {
    $('#img').attr('src', data);
    $('#textarea').val(data);
  });
});
function run(input_file, get_data) {
/*input_file:文件按钮对象*/
/*get_data: 转换成功后执行的方法*/
if (typeof (FileReader) === 'undefined') {
  alert("抱歉,你的浏览器不支持 FileReader,不能将图片转换为Base64,请使用现代浏览器操作!");
} else {
try {
  /*图片转Base64 核心代码*/
  var file = input_file.files[0];
  //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
  if (!/image\/\w+/.test(file.type)) {
    alert("请确保文件为图像类型");
    return false;
  }
  var reader = new FileReader();
  reader.onload = function () {
    get_data(this.result);
  }
  reader.readAsDataURL(file);
  } catch (e) {
    alert('图片转Base64出错啦!' + e.toString())
  }
}
}
</script>
 
 
关于FileReader资料:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

js 图片转换为base64的更多相关文章

  1. js 图片转换为base64 (2)

    <input type="file" id="testUpload"> <img src="" id="img& ...

  2. js图片转换为base64

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. js 图片转换base64 base64转换为file对象

    function getImgToBase64(url,callback){//将图片转换为Base64 var canvas = document.createElement('canvas'), ...

  4. JS 图片转Base64

    JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决 ...

  5. 将图片转换为base64 格式

    1.页面上的图片,转换成base64格式,可以通过canvas 的 toDataURL 例子:给定图片的url 将图片转换为base64 var imageSrc = "../images/ ...

  6. JAVA 将图片转换为Base64编码

    这里使用的jar包是commons-codec-1.10.jar; 示例代码 import java.io.FileInputStream; import java.io.FileOutputStre ...

  7. H5 Js图片转base64编码

    <!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. C# 图片转换为base64

    WebRequest webRequest = WebRequest.Create("验证码url"); WebResponse webResponse = webRequest. ...

  9. 【PHP】图片转换为base64,经过post传输后‘+’会变成 ‘空格’

    图片转换为base64,经过post传输后‘+’会变成 ‘空格’, 需要用PHP 处理一下 $str= $_POST['img_data']; $str= str_replace(' ','+',$s ...

随机推荐

  1. (10.11)Java第一小步

    在度过大一和大二浑浑噩噩的咸鱼生活之后,我决定 开始为自己的未来负责,开始学习自己喜欢的Java,同时决定以这篇博客来开启自己的博客之旅和Jaca的学习之路. 以后我也会陆续在博客园更新自己的博客,记 ...

  2. ajax请求service报405错误 - 【服务器不允许的方法】

    产生原因:web服务器找不到service方法处理请求. 检查方向: ① service方法名称写错 ② service方法参数类型与标准不一致 ③ service方法异常,返回值类型和标准不一致 ④ ...

  3. 不使用数据结构反转栈 递归 CVTE实习 CVTE是一家什么公司

    本文因为垃圾csdn标题字限制,标题写不好.本文想说一个算法,和我在CVTE的实习,我看到CVTE是一家什么公司.如果想要喷我的,可以留言,我不会理.如果想喷公司,可以在博客评论或发到我邮件linde ...

  4. vim下单行长文本的时候卡顿解决办法

    在vim编辑文件时,若单行过长,可能会导致vim卡顿,严重影响使用体验 估计是syntax匹配效率过滥导致.. 偶尔发现了一个临时的解决办法就是关掉syntax然后再打开,即在命令模式下 :synta ...

  5. Uva11582

    最近各种破事忙死了 终于开始做题了 紫薯第10章第一题,come on 设g(i)=f(i) mod n,当二元组(g(i).g(i+1))出现重复时,整个序列就开始重复(这一话怎么也不懂,请大神解释 ...

  6. JavaScript中的数值转换

    在JavaScript中,有3个函数可以把非数值转换为数值 1.Number()函数 Number()可以用于任意数据类型. 转换规则如下. 如果是Boolean值,true和false将分别被转换为 ...

  7. inotify-tools + php脚本实现Linux服务器文件监控并邮件提醒

      需求简介: 由于服务器被挂马,经常被写入涉敏感的html网页,领导时常被网监请去喝茶,呵呵你懂的.所以有两个需求,一是找出服务器的木马后门和修复代码漏洞,二是监控服务器涉及增删改查的文件. 第一个 ...

  8. 薪资那么高的Web前端,你该怎么学?

    由于前端开发的火热和一些IT巨头公司 对 web前端开发人员的需求旺盛,让越来越多的人转入前端.前端开发领域 是IT技术语言领域唯一一个男女老少都可以快速入门并快速提升兴趣的领域,今天就来聊聊前端到底 ...

  9. TQ2440--nandflash(K9F2G08U0A)驱动编写

    一.数据手册相关内容 1.地址传输周期 2.命令表 3.在寄存器中,会涉及TACLS,TWRPH0,TWRPH1的设定 这里我们就去看nandflash的数据手册 在这里我们可以清楚的看到,TACLS ...

  10. 【NOIP2016提高组】 Day2 T1 组合数问题

    题目传送门:https://www.luogu.org/problemnew/show/P2822                 ↓题目大意↓ 数据的极限范围:n,m≤2000,k≤21,数据组数≤ ...