<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width" />

    <title>jquery 图片base64</title>

    <script type="text/javascript" src="http://s28.9956.cn/static/v4/js/jquery-1.8.3.min.js"></script>

</head>

<body>

    <input id="testFile" type="file">

    <hr>

    <img id="testImg" style="max-height: 300px; height: 8em; min-width:8em;">

    <hr>

    <textarea id="testArea" style="display: block; width: 100%;height: 30em;"></textarea>

    <input id="btnTest" type="button" value="提交base" />

    <script>

        $("#testPhone").click(function () {

            $("#testFile").click();

        });

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

            run(this, function (data) {

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

                $('#testArea').val(data);

            });

        });

        $("#btnTest").click(function () {

            $.ajax({

                url: "/usercenter/testbaseaction",

                type: "post",

                dataType: "json",

                data: {

                    "content": $("#testArea").val(),

                },

                async: false,

                success: function (result) {

                    if (result.Code == 200) {

                        alert(result.Data);

                    } else {

                    }

                }

            });

        });

        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>

</body>

</html>

jquery 图片转为base64的更多相关文章

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

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

  2. canvas将图片转为base64

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

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

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

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

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

  5. jquery 上传图片转为base64，ajax提交到后台

    支持多张图片上传.图片上传数量修改.可以删除 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  6. 使用JS将图片转为Base64

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 将图片转为base64

    DEMO: <input type="file" id="file" multiple="multiple"> <div ...

  8. 解决 canvas 将图片转为base64报错

    var canvas=document.getElementById("canvas"),//获取canvas ctx = canvas.getContext("2d&q ...

  9. C# 图片转为Base64

    /// <summary> /// 图片转Base64 /// </summary> /// <param name="ImageFileName"& ...

随机推荐

  1. 达尔稳usb转RJ45的接口转换器（usb2.0接口）在ubuntu16.04中驱动（r8152）编译安装与使用

    淘宝买了usb转RJ45的接口转换器:https://detail.tmall.com/item.htm?id=524808012954&ali_refid=a3_430582_1006:11 ...

  2. JAVA设计模式---命令模式

    1.定义: 将“请求”封装成对象,以便使用不同的请求.队列或者日志来参数化其他对象,命令模式也支持可撤销的操作.命令可以用来实现日志和事务系统. 2.实例: 1)需求:设计一个家电遥控器的API,遥控 ...

  3. ABP官方文档翻译 5.4 SwaggerUI集成

    SwaggerUI集成 介绍 ASP.NET Core 安装Nuget包 配置 测试 ASP.NET 5.x 安装Nuget包 配置 测试 介绍 在它的网站上:“...使用Swagger可用的API, ...

  4. ABP官方文档翻译 2.2 ABP会话

    ABP会话 介绍 关于IAbpSession 注入会话 会话属性 覆盖当前会话值 警告! 用户标示 介绍 如果应用需要登录的话,同样也需要知道当前用户可以执行哪些操作.ABP在展现层提供了会话对象,同 ...

  5. bzoj 4813: [Cqoi2017]小Q的棋盘 [树形背包dp]

    4813: [Cqoi2017]小Q的棋盘 题意: 某poj弱化版?树形背包 据说还可以贪心... #include <iostream> #include <cstdio> ...

  6. BZOJ 2882: 工艺 [后缀自动机+map]

    Description 小敏和小燕是一对好朋友. 他们正在玩一种神奇的游戏,叫Minecraft. 他们现在要做一个由方块构成的长条工艺品.但是方块现在是乱的,而且由于机器的要求,他们只能做到把这个工 ...

  7. POJ3335 POJ3130 POJ1474 [半平面交]

    终于写出自己的半平面交模板了....... 加入交点的地方用了直线线段相交判定 三个题一样,能从任何地方看到就是多边形的内核 只不过一个顺时针一个逆时针(给出一个多边形的两种方式啦),反正那个CutP ...

  8. [实例]JAVA生成字母+随机数字并生成文件

    package com.ishow.control.code; import java.io.*; import java.text.SimpleDateFormat; import java.uti ...

  9. main函数的实现解析

    main函数的传参的实现,其实也是一个解析字符串的过程:将每个word后一个空格改为“/0”,将单词提取出来. 就是这么简单. 废话不多说,直接上代码: #include<stdio.h> ...

  10. shared_lock and unique_lock

    简单的说: shared_lock是read lock.被锁后仍允许其他线程执行同样被shared_lock的代码.这是一般做读操作时的需要. unique_lock是write lock.被锁后不允 ...