<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. Echarts数据可视化series-effectscatter特效散点图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  2. Android 双击退出程序实现(有侧滑界面)

    大家好,今天带来双击退出程序实现方法,我知道,网上也是有许多关于双击退出程序实现的方法,所以,听见当然是给大家带来不一样的双击退出的实现方法. 首先带来的便是关于onKeyDown和onKeyPres ...

  3. ftpclient 550 permission denied

    遇到一个坑,ftp服务器有主被动模式,如果ftpclient 没有设置模式,默认就是主动模式,如果ftp服务器是被动模式,那么使用ftpclient就执行上传和下载,就会失败, 添加ftpClient ...

  4. Java-JMS Bug记录

    1.Junit测试时,使用for循环发送JMS(ReportQuestionSender)的时候,监听器(ReportQuestionListener)只接受到一条消息. 原因:使用Junit测试会阻 ...

  5. 深入理解计算机系统(4.2)------逻辑设计和硬件控制语言HCL

    上一篇博客我们简单介绍了Y86指令集体系,而这篇博客我们将介绍指令集体系的逻辑设计和硬件控制语言HCL,为后面去实现Y86打下基础. 在硬件设计中,用电子电路来计算对位进行运算的函数,以及在各种存储器 ...

  6. linux 守护进程编程

    概述: Daemon运行在后台也称作"后台服务进程". 它是没有控制终端与之相连的进程.它独立于控制终端.通常周期的执行某种任务. 守护进程脱离终端是为了避免进程在执行过程中的信息 ...

  7. java基础---字符串string

    1.字符创的概念 java字符串就是Unicode字符序列.例如,串“Java\u2122”由5个Unicode字符J.a.v.a和TM.java没有内置的字符串类型,而是在标准库Java类库中提供了 ...

  8. [ACdream]女神教你字符串——违和感

    题目描述: 女神最喜欢字符串了,字符串神马的最有爱了. 女神是一个重度强迫症患者,面对不是对称的东西,她会觉得太违和了,就会爆炸.所以她手上的字符串都是回文的,像什么a,b,aabaa,abcba,上 ...

  9. MongoDB查询分析

    MongoDB 查询分析可以确保我们建立的索引是否有效,是查询语句性能分析的重要工具.MongoDB 查询分析常用函数有:explain() 和 hint(). 1. explain(): 提供查询信 ...

  10. MongoDB关系与数据库引用

    MongoDB关系: MongoDB 的关系表示多个文档之间在逻辑上的相互联系.文档间可以通过嵌入和引用来建立联系. 1. 嵌入关系: 形式:把一个文档嵌入到另一个文档中. 优点:数据保存在单一的文档 ...