<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>JS 图片转Base64</title>

    <script src="//cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>

    <script>

        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())

                }

            }

        }

        $(function () {

            $("#select_img").change(function () {

                run(this, function (data) {

                    $('#test_img').attr('src', data);

                    $('#base64_str').html(data);

                });

            });

        });

    </script>

</head>

<body>

<input type="file" id="select_img" accept=".png,.jpg,.jpeg,.gif,.bmp">

<hr>

<img style="max-height: 300px; max-width:300px;" id="test_img">

<hr>

<p id="base64_str"></p>

</body>

</html>

via：https://www.cnblogs.com/wujingtao/p/5196836.html

使用JS将图片转为Base64的更多相关文章

  1. js将图片转为base64编码，以字符串传到后台存入数据库

    (前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...

  2. [转]JS将图片转为base64编码

    本文转自:https://blog.csdn.net/DeMonliuhui/article/details/79731359 1.根据img标签获取base64编码/** * * @param im ...

  3. JS将图片转为base64

    var getDataFromImg = function(img) { var canvas = document.createElement('canvas'); var context = ca ...

  4. canvas将图片转为base64

    最简例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...

  5. 011_如何decode url及图片转为base64文本编码总结

    一.咱们经常会遇到浏览器给encode后的url,如何转换成咱们都能识别的url呢?很简单,talk is easy,Please show me your code,如下所示: (1)英文decod ...

  6. html5 图片转为base64格式异步上传

    因为有这个需求(移动端),所以就研究了一下,发现还挺不错的.这个主要是用了html5的API,不需要其他的JS插件,不过只有支持html5的浏览器才行,就现在而言应该大部份都支持的.<!DOCT ...

  7. jquery 图片转为base64

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. 前端JS转图片为base64并压缩、调整尺寸脚本

    image to base64 to blob //////////////////////////////////////////////////////////////////////////// ...

  9. js 选择图片生成base64数据

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...

随机推荐

  1. Sql server 执行计划详解

    序言 本篇主要目的有二: 1.看懂t-sql的执行计划,明白执行计划中的一些常识. 2.能够分析执行计划,找到优化sql性能的思路或方案. 如果你对sql查询优化的理解或常识不是很深入,那么推荐几骗博 ...

  2. 《剑指offer》面试题24 二叉搜索树的后序遍历序列 Java版

    (判断一个元素均不相同的序列是否为一个BST的LRD) 书中方法:首先对于二叉搜索树,左子树中的所有元素小于根节点小于右子树中的所有元素,然后后序遍历序列最后一个元素是根节点,这是我们已知的条件.这道 ...

  3. [2019上海网络赛F题]Rhyme scheme

    题目链接 题意,求出合法的长度为n的字典序第k小字符串,合法的定义为除了最后一位,每一位的取值范围为'A'到'A'+pos-1,而最后一位的取值范围'A'到当前字符串最大值+1. 队友tql,Orz ...

  4. 只使用非递归的mutex

    mutex分为递归(以下简写为rm)和非递归(以下简写为nrm)两种,它们的唯一区别在于:同一个线程可以重复对rm加锁,但是不能重复对nrm加锁. 虽然rm使用起来要更加方便一些,并且不用考虑一个线程 ...

  5. tensorflow学习笔记六----------神经网络

    使用mnist数据集进行神经网络的构建 import numpy as np import tensorflow as tf import matplotlib.pyplot as plt from ...

  6. [LeetCode] 82. 删除排序链表中的重复元素 II

    题目链接 : https://leetcode-cn.com/problems/remove-duplicates-from-sorted-list-ii/ 题目描述: 给定一个排序链表,删除所有含有 ...

  7. js的抖动及防抖和节流

     js的抖动 在 js 中 改变窗口大小 & 上下滚动滚动条 & 反复向输入框中输入内容 ... , 如果绑定了相应的事件 , 这些事件的触发频率非常高, 严重影响用户体验和服务器的性 ...

  8. 编辑SE16N表的函数

    函数:SE16N_INTERFACE 此外还可以SE16N 输入对应的查询条件后执行debug该变量 GD-SAPEDIT = ‘X’ 和GD-EDIT = ‘X’ 来实现当前SE16N 中该表的编辑

  9. 47. Permutations II (JAVA)

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

  10. Jmeter--逻辑控制之if控制器（转）

    一.背景 在实际工作中,当使用Jmeter做性能脚本或者接口脚本时,有可能会遇到需要对不同的条件做不同的操作,基于这种诉求,在Jmeter中可使用if控制器来实现 二.实际操作 逻辑控制器位置: 在线 ...