JS将图片转换成Base64码

直接上代码

html页面代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>上传文件</title>

    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

    <script src="Base64Img.js"></script>

    <style>

        label {

            position: relative;

            display: inline-block;

            background: #D0EEFF;

            border: 1px solid #99D3F5;

            border-radius: 4px;

            padding: 4px 12px;

            overflow: hidden;

            color: #1E88C7;

            text-decoration: none;

            text-indent: 0;

            line-height: 20px;

            cursor: pointer;

        }

        /*隐藏默认样式*/

        input[id=file] {

            margin-left: -2000px;

            height: 0;

        }

        /*隐藏默认样式*/

        input[id=file1] {

            margin-left: -2000px;

            height: 0;

        }

    </style>

</head>

<body>

    <div>

        <label for="file" id="upload_file">上传文件</label>

        <input type="file" accept="image/*" id="file">

        <div class="span" id="update_file_label"></div>

        <input type="hidden" id="base64_output" />

        <div class="strong red" id="img_size"></div>

        <img id="img_prev" src="../images/member/nophoto.gif" style="max-width: 100%; border: 1px solid gray;">

        <label for="file1" id="upload_file1">上传文件</label>

        <input type="file" accept="image/*" id="file1">

        <div class="span" id="update_file_label1"></div>

        <input type="hidden" id="base64_output1" />

        <div class="strong red" id="img_size1"></div>

        <img id="img_prev1" src="../images/member/nophoto.gif" style="max-width: 100%; border: 1px solid gray;">

    </div>

    <script>

        $(function () {

            $("#file").bind("change", function () {

                $("#update_file_label").html(this.value);

                gen_base64('base64_output', 'img_size', 'img_prev', 'file');

            });

            $("#file1").bind("change", function () {

                $("#update_file_label1").html(this.value);

                gen_base64('base64_output1', 'img_size1', 'img_prev1', 'file1');

            });

        });

    </script>

</body>

</html>

Base64Img.js代码：

function $_(id) {

    return document.getElementById(id);

}

/*把图片转成Base64码

@param 参数说明：

codeInput:把转好的Base64码存放在哪个控件中

imgSize:图片的大小（单位是KB）

imgSrc:点击上传后图片的显示的标签

fileInputId:上传控件的ID

*/

function gen_base64(codeInput, imgSize, imgSrc, fileInputId) {

    $_(codeInput).value = '';

    $_(imgSize).innerHTML = '';

    $_(imgSrc).src = '../images/member/nophoto.gif';

    var file = $_(fileInputId).files[0];

    if (!/image\/\w+/.test(file.type)) {

        alert("请确保文件为图像类型");

        return false;

    }

    r = new FileReader();  //本地预览

    r.onload = function () {

        $_(codeInput).value = r.result;

        $_(imgSrc).src = r.result;

        //$("#img_prev").attr("src", r.result);

        //$("#img_prev").css("width", "50%");

        $_(imgSize).innerHTML = "    图片大小：" + Math.round(r.result.length / 1024 * 1000) / 1000 + " KB";

    }

    r.readAsDataURL(file);

}

//window.onload = function () {

//    if (typeof (FileReader) === 'undefined') {

//        alert("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！");

//        $_('upload_file').disabled = true;

//    }

//}

//使用demo

//<!DOCTYPE html>

//<html lang="en">

//<head>

//    <meta charset="UTF-8">

//    <title>上传文件</title>

//    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

//    <script src="../Scripts/Module/Common/Base64Img.js"></script>

//    <style>

//        label {

//            position: relative;

//            display: inline-block;

//            background: #D0EEFF;

//            border: 1px solid #99D3F5;

//            border-radius: 4px;

//            padding: 4px 12px;

//            overflow: hidden;

//            color: #1E88C7;

//            text-decoration: none;

//            text-indent: 0;

//            line-height: 20px;

//            cursor: pointer;

//        }

///*隐藏默认样式*/

//input[id=file] {

//    margin-left: -2000px;

//    height: 0;

//}

//</style>

//</head>

//<body>

//<div>

//    <label for="file" id="upload_file">上传文件</label>

//    <input type="file" accept="image/*" id="file">

//    <div class="span" id="update_file_label"></div>

//    <input type="hidden" id="base64_output" />

//    <div class="strong red" id="img_size"></div>

//    <img id="img_prev" src="../images/member/nophoto.gif" style="max-width: 100%; border: 1px solid gray;">

//</div>

//<script>

//    $(function () {

//        $("#file").bind("change", function () {

//            $("#update_file_label").html(this.value);

//            gen_base64('base64_output', 'img_size', 'img_prev', 'file');

//        });

//    });

//</script>

//</body>

//</html>

最终效果

base64码存在放隐藏控件中，直接用Jquyer获取就可以了

JS将图片转换成Base64码的更多相关文章

js绝对地址图片转换成base64的方法
//将图片转换成base64 function getBase64Image(url, callback){ var canvas = document.createElement('canvas') ...
delphi将图片转换成Base64编码函数
{************************************************************************** 名称: BaseImage 参数: fn: TF ...
java 图片转换成base64字符串
import java.io.ByteArrayOutputStream; import java.io.FileInputStream;import java.io.FileOutputStream ...
Java对网络图片/本地图片转换成Base64编码和解码
一.将本地图片转换成Base64编码字符串 /** * 将本地图片转换成Base64编码字符串 * * @param imgFile 图片目录路径 * @return */ public static ...
利用PHP将图片转换成base64编码的实现方法
先来说一下为什么我们要对图片base64编码 base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一.base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于网络传输. ...
Base64字符保存图片，图片转换成Base64字符编码
//文件转换成Base64编码 public static String getFileBase64Str(String filePath) throws IOException { String f ...
图片转换成Base64编码集成到html文件
首先为什么要这么做? 原因很简单这样可以减少与服务器的请求,当然对于一些浏览器并不支持,如IE8.通常用在手机版网站中,具体转化方法如下: 1.在线打开Base64的编码器将图片编码成Base64 ...
lua 把图片转换成base64
调用实例 require("ZZBase64") local files local file = io.open("E:\\2342.jpg","r ...
data:image/png;base64 上传图像将图片转换成base64格式
大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...

随机推荐

Vertica系列:Vertica和Hadoop的互操作性
Vertica 8和 Hadoop 集群的互操作性已经很不错的, 但这块肯定是Vertica研发的重点, 将来可能还有较大的变动. Vertica 集群和 Hadoop 集群的两种布局方式集群布局 ...
Less 创建css3动画@keyframes函数
封装: /** * animation */ .keyframes (@prefix,@name,@content) when (@prefix=def) { @keyframes @name { @ ...
Mac 开发使用中的小技巧收集
1. mac 下ssh连接到 linux 服务器管理,同putty,无需第三方 Mac 下打开终端,输入: ssh 登录用户名@ip地址如: ssh root@142.138.1.89 如有询问是否 ...
SQL Server进阶（十二）函数
概述函数有且只有一个输入参数和一个返回值,而存储过程没有这个限制: 返回表变量的函数可以当做VIEW或者临时表用在WHERE/HAVING/SELECT/JOIN语句中而存储过程不可以: 存储过程中 ...
字符设备驱动（二）---key的使用：查询方式
---恢复内容开始--- 一.硬件电路 1.1 电路原理图 S1-S5共5个按键,其中,S2-S4为中断按键,S1为复位按键.S1直接为硬件复位电路,并不需要我们写进驱动. 单片机接口如下图: 由图中 ...
luogu 4145 花神游历各国线段树/树状数组+并查集
此题一看便是RMQ问题,但是由于开平方的特殊操作,tag操作失效此时发现特性:sqrt最多执行6此便使值到达1/0,此时可以剪枝不进行该操作,利用并查集到达特性找根,根代表还可以进行操作的点,再利用 ...
[C++]Linux之读取计算机网络数据[/proc/net/dev]
#include<stdlib.h> #include<stdio.h> #define BUFFER_SIZE 256 int main(){ FILE *stream; c ...
Java基础_0305：简单Java类
简单Java类简单Java类是一种在实际开发之中使用最多的类的定义形式,在简单Java类中包含有类.对象.构造方法.private封装等核心概念的使用,而对于简单Java类首先给出如下的基本开发要求 ...
sqlserver分组统计合并
---分组partition by;统计:Count();合并:for xml path('') with cte as( select COUNT(t2.Id) OVER(PARTITION BY ...
Linux之vi编辑器的使用
今天我们来说一下vi编辑器的使用,vi编辑器主要用来在Linux环境下编辑配置文件. 一.使用方法: 1.输入命令 vi filename,打开文件,处于一个查看模式 2.点击键盘 i,进入inser ...

JS将图片转换成Base64码

JS将图片转换成Base64码的更多相关文章

随机推荐

热门专题