<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. EasyUI Dialog 窗体 布局记要

    通常在窗体里放置的都是表单,或者使用分栏(Tab)来陈列信息也是非常的好用.在这里特别记录一下在窗体里同时放置表单和表格的设计思路. 仅放置一个表单 通常 Dialog 里只放一个表单,而且表单的行数 ...

  2. DOM2练习

    左右互相输入 <!DOCTYPE html><html>    <head>        <meta charset="UTF-8"&g ...

  3. Android View, Window,Activity概念区分(2)

    (1)View:最基本的UI组件,表示屏幕上的一个矩形区域. (2)Window: 表示一个窗口,不一定有屏幕那么大,可以很大也可以很小:它包含一个View tree和窗口的layout 参数.Vie ...

  4. 移动端效果之IndexList

    写在前面 接着前面的移动端效果讲,这次讲解的的是IndexList的实现原理.效果如下: 代码请看这里:github 移动端效果之swiper 移动端效果之picker 移动端效果之cellSwipe ...

  5. Emgu.CV(三)

    像素交换 private void btn_Exchange_Click(object sender, EventArgs e) { if (imageBox1.Image != null) { va ...

  6. C 结构体零散知识点

    1.结构体无法把自己作为成员,但可以包含指向自己的指针成员 2.定义不完整结构类型(类型,结构,占用空间无法确定,如void指针,声明没有指明数组长度数组)只能使用小标签,即struct struct ...

  7. Node Sass could not find a binding for your current environment 解决办法

    具体错误如下: 解决办法: 命令行执行  npm rebuild node-sass  命令(如果不行,则先运行npm install node-sass命令执行再执行 npm rebuild nod ...

  8. WPF ListBox 一些小知识点

    页面代码: <Grid Grid.Row="0" Grid.Column="2"> <ListBox x:Name="lvStep& ...

  9. css3中“渐变”兼容性解决方案

    这次是简单的谈一下我们常见的渐变在各个浏览器下的兼容性问题,算一个比较简单的问题. 我们熟知的浏览器有Chrome.Firefox.Opera.Safari以及ie系列.最基础的background: ...

  10. xml读取一行数据

    #include<map>#include<iostream>#include<fstream>#include<string>using namesp ...