<!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. JavaScript之正则表达式（1）

    一,在线工具: regexper.com 二 ,正则示例: (1)(1)(1)(1)(1)(1)(1)(1)(1)(1)(1)(1)(1)(1)(1)(1)(1)(1)(1)(1)(1)(1)(1)( ...

  2. JavaSE基础篇—数据类型和运算符

       本章知识点内容概括 数据类型:  1.基本数据类型 数值型 整数类型 byte(128~127),占1个字节的储存间 short(-2^15~2^15-1),占2个字节 int(默认类型-2^3 ...

  3. 《.NET 设计规范》第 3 章 命名规范

    <.NET 规范>第 3 章 命名规范 3.1 大小写约定 要把 PascalCasing 用于由多个单词构成的命名空间.类型以及成员的名字. 要把 camelCasing 用于参数的名字 ...

  4. Linux 下编译安装xCache命令速记

    注意要先确保/path-to-php/bin/php-config存在下载链接: http://pan.baidu.com/s/1hqh5pDM #解压xcache源代码tar -zvxf xcach ...

  5. Python基础篇(四)

    Python中的字典类似于Java中的Map,数据以键值对的形式存储. 字典可以用以下的方式使用: >>> phonebook = {"alice":" ...

  6. 香甜的黄油 Sweet Butter

    原题链接:https://www.luogu.org/problem/show?pid=1828#sub 经典的最短路问题. 各位不要被题目条件迷惑了,牧场想象成点,道路想象成边,奶牛所在的位置想象成 ...

  7. [2-SAT]【学习笔记】【未完】

    这种一看就很2的东西.... 参考资料: 由对称性解2-sat问题 2-sat解法浅析 $SAT$理论: $2-SAT$ 两种形式: $x \in \hat B$ $x \lor y(x,\ y \i ...

  8. firefox在引入vue.js后不支持e=e||window.event的解决办法

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

  9. SqlSugar ORM 入门到精通【一】入门篇

    背景 SqlSugar是一款国产ORM,除了拥有媲美原生的性能 另外还有满足各种需求的功能,简单好用一分钟就能够轻松上手. 2.x版本正式在自已公司内部项目使用 3.x版本得到了更多公司的喜欢不过也会 ...

  10. MySQL操作中的一些细节及良好习惯--------持续更新中...

    1.尽量不要写太过复杂的SQL查询,不要想着非要一次性将结果全部以前端要求的形式返回出来,可以多次分开查询,这样逻辑清晰,问题解决速度快,方便维护,并且SQL的效率也高. 2.在使用联表查询的时候,关 ...