<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. 如何开发webpack loader

    关于webpack 作为近段时间风头正盛的打包工具,webpack基本占领了前端圈.相信你都不好意思说不知道webpack. 有兴趣的同学可以参考下我很早之前的webpack简介 . 确实webpac ...

  2. Delphi实现电脑端微信图片文件解密

    电脑端微信收到图片后是存在了“C:\Users\系统用户名\Documents\WeChat Files\微信帐号\Data”目录下的,但文件不能直接使用图片浏览器打开的,因为做了一些加密,之前有个朋 ...

  3. C#基础之转换

    C#中一共有两种转换方式,隐式转换和显示转换 隐式转换:就是不需要声明就能进行的转换,通俗来说就是小范围内的数据类型转大范围数据类型 显示转换:就是通常说的强制转换,需要在代码中写明要的数据类型.通俗 ...

  4. jfinal拦截器配置

    实现aop @Before(Tx.class) public void index(){ // renderText("hello world!"); render("/ ...

  5. Java集合框架体系详细梳理,含面试知识点。

    一.集合类 集合的由来: 面向对象语言对事物都是以对象的形式来体现,为了方便对多个对象的操作,就需要将对象进行存储,集合就是存储对象最常用的一种方式. 集合特点: 1,用于存储对象的容器.(容器本身就 ...

  6. JavaScript中的比较规则之“==”运算符

    "=="运算符(两个操作数的类型不相同时) 如果一个值是null,另一个值是undefined,则它们相等 如果一个值是数字,另一个值是字符串,先将字符串转换为数学,然后使用转换后 ...

  7. 全面学习理解TLB(Translation Look-aside Buffer)地址变换高速缓存

    全面学习理解TLB(Translation Look-aside Buffer)地址变换高速缓存 前言: 本文学习思路是:存在缘由   --> 存在好处 --> 定义性质 --> 具 ...

  8. Ubuntu远程登陆、SSH图形界面、WOL远程唤醒

    本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 实现目标:通过路由器配置路由路径,将拨号获取的公网IP地址指向局域网Ubuntu服务器.家里有 ...

  9. Java web学习 Cookie&&Session

    cookie&&session 会话技术 从打开一个浏览器访问某个站点,到关闭这个浏览器的整个过程,成为一次会话.会 话技术就是记录这次会话中客户端的状态与数据的. 会话技术分为Coo ...

  10. Muduo阅读笔记---入门(一)

    第一步:下载源码和文档 下载muduo项目的源码.<muduo-manual.pdf>文档,以及<Linux多线程服务端编程:使用muduo C++网络库.pdf>,这些是前期 ...