文章来源:http://www.cnblogs.com/hello-tl/p/7661535.html

1、HTML代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        # css代码

    </style>

</head>

<body>

    <div class="box">

        <div class="imgDiv">

            <h2>图片显示</h2>

            <div class="img">

                <img src="">

            </div>

        </div>

        <div class="Base64Div">

            <h2>base64显示</h2>

            <textarea></textarea>

        </div>

    </div>

    <div>

        <input type="file" onchange="inputFileBase64();" id="inputFileImg">

        <a href="javascript:;">点击上传图片</a>

    </div>

<script>

    # javascript代码

</script>

</body>

</html>

2、Css代码

*{

    padding:0;margin:0;

}

html,body{

    height:100%;

    width:100%;

}

.box{

    height:calc(100% - 100px);

    width:100%;

}

.imgDiv{

    width:50%;

    float:left;

    height:100%;

    width:50%;

    min-width: 50%;

    max-width:  50%;

    min-height: 100%;

    max-height:  100%;

}

.Base64Div{

    width:50%;

    float:right;

    height:100%;

    width:50%;

    min-width: 50%;

    max-width:  50%;

    min-height: 100%;

    max-height:  100%;

}

h2{

    margin: 0 auto;

    text-align:center;

    display:block;

    line-height:50px;

}

textarea{

    width:calc(100% - 10px);

    min-width:calc(100% - 10px);

    max-width:calc(100% - 10px);

    height:calc(100% - 50px);

    max-height:calc(100% - 50px);

    min-height:calc(100% - 50px);

    margin: 0 auto;

    display:block;

}

.img{

    display:block;

    width:calc(100% - 10px);

    min-width:calc(100% - 10px);

    max-width:calc(100% - 10px);

    height:calc(100% - 50px);

    max-height:calc(100% - 50px);

    min-height:calc(100% - 50px);

    margin: 0 auto;

    border:1px red solid;

}

img{

    display: block;

    margin: 0 auto;

}

#inputFileImg{

    display:none;

}

a{

    display: block;

    text-align: center;

    line-height: 100px;

}

3、JavaScript代码

document.getElementsByTagName('a')[0].onclick = function(){

    document.getElementById('inputFileImg').click();

}

//当input发生改变时调用

function inputFileBase64(){

    var call = upload_file('inputFileImg',['.png','.jpg']);

}

/**

 * 返回input type[file]框 属性

 * 返回格式{base64,width,height}

 * @param input_img_id  input框id

 * @param format        支持格式json对象形势['.png','.jpg']

 */

function upload_file(input_img_id,format){

    if(document.getElementById(input_img_id).value != ''){

        var fileExt=document.getElementById(input_img_id).value.substr(document.getElementById(input_img_id).value.lastIndexOf(".")).toLowerCase();//获得文件后缀名

        var data =  {'code' : false,'message':'转码失败，不支持该后缀名'};

        for(var i = 0; i < format.length; i++){

            //循环判断是否合法

            if(fileExt == format[i]){

                data = {'code' : true};

            }

        }

        if(!data['code']){

            document.getElementById(input_img_id).value='';

            return data;

        }

        var file = document.getElementById(input_img_id);

        var data = createReader(file.files[0]);

    }

}

/**

 * 上一个方法调用

 * 返回图片信息 {code,base_64,width,height}

 * @param file

 */

 function createReader(file){

    var reader = new FileReader;

    reader.onload = function (evt){

        var image = new Image();

        image.onload = function(){

            data = {

                'code'      : true,

                'base_64'   : evt.target.result,  //base64格式

                'width'     : this.width,         //图片宽度

                'height'    : this.height,        //图片高度

                'message'   : '转码成功'

            }

            //写自己的代码

                document.getElementsByTagName('img')[0].src=data.base_64;

                document.getElementsByTagName('textarea')[0].innerHTML=data.base_64;

            //写自己的代码结束

        };

        image.src = evt.target.result;

    };

    reader.readAsDataURL(file);

 }

4、显示效果

文章来源:http://www.cnblogs.com/hello-tl/p/7661535.html

JavaScript：获取上传图片的base64的更多相关文章

  1. javascript获取上传图片的大小

    javascript获取上传图片的大小 <pre><input id="file" type="file"> <input id= ...

  2. JS上传图片-通过FileReader获取图片的base64

    下面文章,我想要的是: FileReader这个对象,可以借助FileReader来获取上传图片的base64,就可以在客户端显示该图片了.同时,还可以把该图片的base64发送到服务端,保存起来. ...

  3. 关于前端使用JavaScript获取base64图片大小的方法

    base64原理 Base64编码要求把3个8位字节(38=24)转化为4个6位的字节(46=24),之后在6位的前面补两个0,形成8位一个字节的形式. 如果剩下的字符不足3个字节,则用0填充,输出字 ...

  4. JavaScript怎么上传图片

    JavaScript怎么上传图片 在XMLHttpRequest Level2出台之前,大多数的异步上传图片都是利用iframe去实现的. 至于具体的实现细节,我就不在这边啰嗦的,Google一下就有 ...

  5. JS 获取图片的base64编码

    获取图片的base64编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  6. JavaScript学习总结(十八)——JavaScript获取浏览器类型与版本

    从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: 1 <script type="text/javascript"> 2 v ...

  7. Javascript 验证上传图片大小[客户端验证]

    需求分析: 在做上传图片的时候,如果不限制上传图片大小,后果非常的严重.那么我们怎样才可以解决一个棘手的问题呢?有两种方式: 1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上, ...

  8. 客户端用javascript获取文件大小

    客户端用javascript获取文件大小 1 ie实现代码如下: <script type="text/javascript" language="javascri ...

  9. JavaScript获取客户端计算机硬件及系统等信息的方法

    JavaScript获取客户端计算机硬件及系统等信息的方法 JavaScript 获取客户端计算机硬件及系统信息 通过WMI来实现获取客户端计算机硬件及系统信息: function getSysInf ...

随机推荐

  1. 洛谷P2572 [SCOI2010]序列操作（珂朵莉树）

    传送门 珂朵莉树是个吼东西啊 这题线段树代码4k起步……珂朵莉树只要2k…… 虽然因为这题数据不随机所以珂朵莉树的复杂度实际上是错的…… 然而能过就行对不对…… (不过要是到时候noip我还真不敢打… ...

  2. Element-wise operations

    Element-wise operations An element-wise operation operates on corresponding elements between tensors ...

  3. bzoj2581 [USACO 2012 Jan Gold] Cow Run【And-Or Tree】

    传送门1:http://www.usaco.org/index.php?page=viewproblem2&cpid=110 传送门2:http://www.lydsy.com/JudgeOn ...

  4. Service官方教程(4)两种Service的生命周期函数

    Managing the Lifecycle of a Service The lifecycle of a service is much simpler than that of an activ ...

  5. Mac OS X：在标题栏上显示目录完整路径

    众所周知mac的finder是不带路径显示的,你进入某个文件夹只会显示当前文件夹的名字而已.虽然你可以在finder的菜单栏中点“显示”-“显示路径栏”把路径栏调出来,但是这样只会不必要的增加find ...

  6. 转-关于UIView的autoresizingMask属性的研究

    在 UIView 中有一个autoresizingMask的属性,它对应的是一个枚举的值(如下),属性的意思就是自动调整子控件与父控件中间的位置,宽高. 1 2 3 4 5 6 7 8 9 enum  ...

  7. 230 Kth Smallest Element in a BST 二叉搜索树中第K小的元素

    给定一个二叉搜索树,编写一个函数kthSmallest来查找其中第k个最小的元素. 注意:你可以假设k总是有效的,1≤ k ≤二叉搜索树元素个数. 进阶:如果经常修改二叉搜索树(插入/删除操作)并且你 ...

  8. Laravel5中防止XSS跨站攻击的方法

    本文实例讲述了Laravel5中防止XSS跨站攻击的方法.分享给大家供大家参考,具体如下: Laravel 5本身没有这个能力来防止xss跨站攻击了,但是这它可以使用Purifier 扩展包集成 HT ...

  9. LN : leetcode 646 Maximum Length of Pair Chain

    lc 646 Maximum Length of Pair Chain 646 Maximum Length of Pair Chain You are given n pairs of number ...

  10. Javascript数据结构之栈

    作者原文:http://hawkzz.com/blog/blog/1515054561771 定义 栈是一种特殊的列表,栈内的元素只能通过列表的一端访问,这一端称为栈顶.栈被称为一种先入后出的数据结构 ...