<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. java连接sqlserver2008r2 心得

    现在是该轻松一笑的时候了,困扰已久的问题有了解释了. 之前的各种连不上,说到底还是权限问题,sqlserver2008r2的权限分得太细了. 两个实例间数据库互相都看不到,更不用谈访问了. 端口号也是 ...

  2. 如何从MVP模式进阶到Clean模式

    从类图上来看,MVP都是一个业务一个Presenter,每个Presenter都是一个接口,它还包含了View的接口,用于定于和View相关的行为,然后Activity等业务类实现View的接口,因为 ...

  3. Android架构: MVC 新浪微博

    由于项目的需要,最近研究了一下需要连接网络项目的MVC架构,参考了一下一个新浪微博的开发架构 http://www.open-open.com/lib/view/open1345524526767.h ...

  4. win10 uwp 绑定多数据

    经常我们需要绑定的数据有多个,当添加到集合控件的对象类型结构比较复杂,我们希望自己来定义排版布局,这时可以使用ItemTemplate用资源的定义 现在有数据 public class caddres ...

  5. 张高兴的 Xamarin.Android 学习笔记:(三)活动生命周期

    本文将直接解释我写的一个示例.示例目的在于展示 Android 活动在 Xamarin 中的用法.如果有朋友对基础知识不太了解建议先学 Android . 新建一个 Xamarin.Android 项 ...

  6. 使用acs-engine在Azure中国区部署kubernetes集群详解

    转载请注明出处:http://www.cnblogs.com/wayneiscoming/p/7649642.html 1. acs-engine简介 ACS是微软在2015年12月推出的一项基于容器 ...

  7. 带你领会 线性代数 微积分的本质 3blue1brown 动画效果帅出天际

    前段时间在 哔哩哔哩 上偶然发现了 3blue1brown 精美的动画,配上生动的讲解,非常适合帮助建立数学的形象思维 其中两大系列,非常值得反复观看: 线性代数的本质(Essence of line ...

  8. 锁对象Lock

    Lock 实现提供了比使用synchronized 方法和语句可获得的更广泛的锁定操作,它能以更优雅的方式处理线程同步问题: public class LockTest { publicstaticv ...

  9. CentOS 升级 Python3 (附带: 一键升级脚本)

      升级环境   应用名称 版本 Python 3.5.2 Syatem CentOS 6.7         升级方法   [1]下载 Python 3: wget http://mirrors.s ...

  10. jquery的遍历选择器-随机整理下

    我从w3c上截了一张图,如图所示: 下面我们来详细说一说.这些选择器. 1.add() 方法将元素添加到匹配元素的集合中.例子: .add(selector) $("div").a ...