<!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. 驱动程序vmci.sys版本不正确。请尝试重新安装 VMware

    今天在测试一台服务器,安装在虚拟机里面,但是发现在安装后,重启了一下电脑,出现了这个错误: 无法获取 vmci 驱动程序版本: 句柄无效.驱动程序 vmci.sys 版本不正确.请尝试重新安装 VMw ...

  2. aria2

    在之前我们已经介绍了通过uGet使用aria2来进行下载,但是这样只是使用aria2最简单的功能,现在我们来介绍一下aria2的常用命令 简单篇: 一般使用使用 aria2 下载文件,只需在命令后附加 ...

  3. php生成随机数

    生成1-10之间的随机数,不重复. 方法一:用shuffle函数. <?php $arr=range(1,10); shuffle($arr); foreach($arr as $values) ...

  4. hdu 5427(排序水题)

    排序 年轻的排前面 名字中可能有空格 Sample Input21FancyCoder 19962FancyCoder 1996xyz111 1997 Sample OutputFancyCoderx ...

  5. 德卡Z90读卡器读取社保卡，德卡Z90读卡器CSharp示例程序源码

    前言,最近学习调用 医保卡业务,使用德卡读卡器,主要就是调用一个DLL,动态库文件. 借着自学的机会把心得体会都记录下来,方便感兴趣的小伙伴学习与讨论. 内容均系原创,欢迎大家转载分享,但转载的同时别 ...

  6. UEditor插入视频，Object Iframe等标签被过滤问题处理

    UEditor插入视频由于兼容性问题,需要再处理一个视频代码,但是新版ueditor不支持Objec IFrame标签,所以要加入// xss过滤白名单 名单来源: https://raw.githu ...

  7. BeautifulSoup使用总结

    一.介绍 BeautifulSoup为一个python库,它可以接收一个HTML或XML的字符串或文件,并返回一个BeautifulSoup对象,之后我们可以使用BeautifulSoup提供的众多方 ...

  8. 2017, X Samara Regional Intercollegiate Programming Contest 题解

    [题目链接] A - Streets of Working Lanterns - 2 首先将每一个括号匹配串进行一次缩减,即串内能匹配掉的就匹配掉,每个串会变成连续的$y$个右括号+连续$z$个左括号 ...

  9. 洛谷P3964 [TJOI2013]松鼠聚会 [二分答案，前缀和，切比雪夫距离]

    题目传送门 松鼠聚会 题目描述 草原上住着一群小松鼠,每个小松鼠都有一个家.时间长了,大家觉得应该聚一聚.但是草原非常大,松鼠们都很头疼应该在谁家聚会才最合理. 每个小松鼠的家可以用一个点x,y表示, ...

  10. 【Ray Tracing The Next Week 超详解】 光线追踪2-2

    Chapter 2:Bounding Volume Hierarchies 今天我们来讲层次包围盒,乍一看比较难,篇幅也多,但是咱们一步一步来,相信大家应该都能听懂 BVH 和 Perlin text ...