<!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. 卷积神经网络CNN经典模型整理Lenet，Alexnet，Googlenet，VGG，Deep Residual Learning（转）

    参考:http://blog.csdn.net/xbinworld/article/details/45619685

  2. vim 如何与外界粘贴复制

    在学习使用vim 的过程序,我们知道在vim 里面,粘贴复制的命令是y/p ,但是我们总会碰到这样的问题:如何把vim 里面复制的内容粘贴到vim 之外或者把vim 外面复制的内容粘贴到vim 里面? ...

  3. ****timeago.js插件：jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例

    前端 时间个性化 插件 jquery.timeago.js 关键词 : 时间格式化 刚刚 N分钟前 N小时前 N天前 N月前 N年前 MM-dd hh:mm  或者  yyyy-MM-dd 前端: & ...

  4. 数学之美——HMM模型（二）解码和Forward算法

    上一篇讨论了HMM的基本概念和一些性质,HMM在现实中还是比较常见的,因此也带来一了一系列的HMM应用问题.HMM应用主要面向三个方面:预测.解码和学习.这篇主要讨论预测. 简单来说,预测就是给定HM ...

  5. 20172301 《Java软件结构与数据结构》实验三报告

    20172301 <Java软件结构与数据结构>实验三报告 课程:<Java软件结构与数据结构> 班级: 1723 姓名: 郭恺 学号:20172301 实验教师:王志强老师 ...

  6. 用scrapy爬取京东的数据

    本文目的是使用scrapy爬取京东上所有的手机数据,并将数据保存到MongoDB中. 一.项目介绍 主要目标 1.使用scrapy爬取京东上所有的手机数据 2.将爬取的数据存储到MongoDB 环境 ...

  7. [代码审计]eyoucms前台未授权任意文件上传

    0x00 背景 来公司差不多一年了,然而我却依旧没有转正.约莫着转正也要到九月了,去年九月来的,实习,转正用了一年.2333 废话不多说了,最近有其他的事要忙,很久没有代码审计了.难的挖不了,浅的没意 ...

  8. 心跳包(HeartBeat)

    http://itindex.net/detail/52922-%E5%BF%83%E8%B7%B3-heartbeat-coderzh 几乎所有的网游服务端都有心跳包(HeartBeat或Ping) ...

  9. 网站截图工具EyeWitness

    网站截图工具EyeWitness   在网页分析和取证中,往往需要大批量的网站截图.Kali Linux提供了一款网站批量截图工具EyeWitness.该工具不仅支持网址列表文件,还支持Nmap和Ne ...

  10. android 自定义view android onmeasure onlayot ondraw

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha android onmeasure onlayot ondraw 顺序 ====== 1 ...