<!DOCTYPE html>

<html>

<head>

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

    <title>jquery 图片base64</title>

    <script type='text/javascript' src="@Url.Content("~/Scripts/jquery-1.10.2.js")"></script>

</head>

<body>

    <div id="testPhone" class="weui_uploader_input_wrp" style="width:79px; height:79px;">

    </div>

    <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

 

jquery 图片文件转base64 显示的更多相关文章

  1. EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射（一） c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象

    EF+LINQ事物处理   在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...

  2. 利用COM组件IPicture读取jpg、gif、bmp图片文件数据和显示图片

    1.读取图片数据 函数原型:bool LoadImage(const char *pName, unsigned char *pBitData); 函数功能,读取pName指向的图片文件的位图数据 b ...

  3. 读取FTP 图片文件，并显示，非下载

    关于FTP,先从怎么创建开始说起,很简单,步骤就两个 ① 电脑-右键管理--本地用户组--添加用户名,密码(用于FTP的用户名.密码) ② IIS 新建FTP站点,命名,指定端口号.FTP文件路径 接 ...

  4. java实现图片文件与Base64的互转

    通过form表单上传图片时,有时候web容器对文件大小的限制会影响我们上传.这时,前端页面可以考虑将图片转换成base64串来实现上传. 图片与Base64的互转,其实就是利用了文件流与Base64的 ...

  5. 推荐一个Xcode插件: KSImageNamed (自动补全图片文件名称, 并显示图片大小)

    http://www.csdn.net/article/2014-05-04/2819586-the-best-xcode-plugins 5. KSImageNamed KSImageNamed是一 ...

  6. c# API接受图片文件以Base64格式上传图片

    /// base64上传图片 /// </summary> /// <returns>成功上传返回上传后的文件名</returns> [HttpPost] publ ...

  7. 从Base64编码转换为图片文件

    package luckyclient.utils;import java.io.FileInputStream;import java.io.FileOutputStream;import java ...

  8. php base64格式的图片字符串和图片文件相互转换的代码

    在移动端上传图片的时候通常会将图片转换成base64格式的字符串提交,所以此时需要使用服务器端的程序进行转换成二进制的数据.如下PHP代码实现了图片文件和base64格式的图片字符串相互转换的方法,同 ...

  9. 基于spring-boot的web应用，ckeditor上传文件图片文件

    说来惭愧,这个应用调试,折腾了我一整天,google了很多帖子,才算整明白,今天在这里做个记录和分享吧,也作为自己后续的参考! 第一步,ckeditor(本博文论及的ckeditor版本4.5.6)的 ...

随机推荐

  1. 2018-2019-2 网络对抗技术 20165301 Exp1 PC平台逆向破解

    任务一 直接修改程序机器指令,改变程序执行流程 1.输入指令objdump -d pwn5301 | more反汇编pwn1文件. 通过反汇编,可以看到main函数中的call 804891,其机器码 ...

  2. SqlServerDBCC SHRINKFILE不起作用

    检查索引碎片的结果: CREATE DATABASE test_shrink USE test_shrink CREATE TABLE show_extent(a INT,b NVARCHAR(390 ...

  3. 【BZOJ】4025: 二分图

    题解 lct维护一个结束时间作为边权的最大生成树,每次出现奇环就找其中权值最小的那条边,删掉的同时还要把它标记上,直到这条边消失 如果有标记则输出No 边权通过建立虚点来维护 代码 #include ...

  4. JPA学习

    [JPA 简介]JPA(Java Persistence API) JPA 不是一个ORM 的框架, 而是一个ORM 的规范,只指定了一些接口, 具体的实现由应用服务器厂商来提供实现. JPA的实现产 ...

  5. IEnumerable<T>

    IEnumerable 饮水思源 <C#本质论> Overview 根据定义,.Net 的中集合,本质上是一个类,它最起码实现了IEnumeraable 或者非泛型的IEnumerable ...

  6. linux安装project lemon测评机

    (写下备用) 机子:xubuntu 16.04 LTS 1.下载lemon github地址:https://github.com/Sojiv/Project_lemon 这里download zip ...

  7. Codeforces Round #368 (Div. 2) B. Bakery 水题

    B. Bakery 题目连接: http://www.codeforces.com/contest/707/problem/B Description Masha wants to open her ...

  8. iOS 七牛多张图片上传

    -(void)uploadImages:(NSArray *)images atIndex:(NSInteger)index token:(NSString *)token uploadManager ...

  9. 使用 IntraWeb (1) - 先测试如何部署为 Asp.Net 的应用

    IntraWeb 14 可以部署为 Asp.Net 的应用程序, 需要 NET Framework 4.5 和 ASP.NET MVC 4 或之上版本的支持; 这下, 只能用虚拟主机的朋友有福了! 我 ...

  10. Versaloon -- Connect To Targets

    Versaloon Full open-source(GPLv3) platform for multiple applications, including programmer, debugger ...