文章来源: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. bzoj 1625: [Usaco2007 Dec]宝石手镯【背包】

    裸的01背包 #include<iostream> #include<cstdio> using namespace std; int c,n,w,v,f[20001]; in ...

  2. 关于python安装lxml插件的问题

    文章只是介绍自己安装时从安装不上到安装后报错,再到安装成功的心路历程,并不代表广大欧皇也会会出现同类型的问题,也不是总结和汇总各种出问题的原因. 直接进入正题,首先我这边是win环境,电脑上装的是py ...

  3. A joke about regular expression

    As the old computer science joke goes: “Let’s say you have a problem, andyou decide to solve it with ...

  4. hibernate简单实现连接数据库，并实现数据的操作

    1:创建实体类 package com.yinfu.entity; public class User { private int id; private String username; priva ...

  5. border-radius的参数

    border-radius的参数: 据w3c上的官方解释,是这样子的: border-radius: 1-4 length|% / 1-4 length|%;1-4指的是radius的四个值,leng ...

  6. python中字典的陷阱

    把字典与列表组合,如 i=20 s=[]#定义一个空列表 b={'d':i}#定义一个字典 while i>0: i=i-1 b['d']=i#更新字典的值 s.append(b) print( ...

  7. [ZPG TEST 108] Antimonotonicity【贪心】

    T2:Antimonotonicity (Antimonotonicity.pas/in/out 128M 1s) 给你1-N的一个排列,数列中的数字互不相等,要求找出最长的子序列a,满足a1> ...

  8. Flutter交互实战－即刻App探索页下拉＆拖拽效果

    前言 Flutter最近比较热门,但是Flutter成体系的文章并不多,前期避免不了踩坑:我这篇文章主要介绍如何使用Flutter实现一个比较复杂的手势交互,顺便分享一下我在使用Flutter过程中遇 ...

  9. Android习惯——给全部Activity添加集合管理

    title: 2017-3-23 Android习惯--给全部Activity添加集合管理 public void ActivityCollector{ public static List<A ...

  10. spark on yarn模式下内存资源管理（笔记2）

    1.spark 2.2内存占用计算公式 https://blog.csdn.net/lingbo229/article/details/80914283 2.spark on yarn内存分配** 本 ...