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 ...
随机推荐
- Jrebel for Android 安装使用
1.打开File-Setting-plugin-browse repositories.然后点击Manger repositories添加我们的私人存储库 http://dl.zeroturnarou ...
- CorelDrawX8安装时提示已安装另一个版本
(1)首先卸载VIsualC++ 2015 运行库. (2)如果有VisualC++ 2017运行库,卸载VisualC++2017运行库,即可.
- EL 快速开始
技术选型上,推荐使用EL表达式,少用不用taglib. 大趋势 前后端分离 mvc+mvvm ,使用[thymeleaf]和前端更好结合,也是springboot官方推荐的做法. [viewTicke ...
- 【bzoj 2588】Spoj 10628. Count on a tree
Description 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始 ...
- PHP实现流程管理功能
核心逻辑:流程管理,在各种系统中扮演很重要的地位,可以把设定好的流程放入系统中,规定好几个节点,只要所有节点都通过,就可以通过. 建立四张数据库表: 1.我们首先做一个新建流程页面 flow.php, ...
- oracle 窗口函数 （keep）
看到很多人对于keep不理解,这里解释一下! Returns the row ranked first using DENSE_RANK2种取值:DENSE_RANK FIRSTDENSE_RANK ...
- Python之List列表的增删改查
序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. Python有6个序列的内置类型,但最常见的是列表和元组. 序列 ...
- jq的error
error事件会在js发生错误或资源加载失败时触发.该事件主要用于window对象.<img>等元素. 此外,你可以为同一元素多次调用该函数,从而绑定多个事件处理函数.触发error事件时 ...
- day 10 - 2 函数练习
1.写函数 接收 n 个数字 求这些参数数字的和 def sum_func(*args): total = 0 for i in args: total += i return total prin ...
- 遇到以前跑一次却没问题的问题，直接maven install 再跑
遇到以前跑一次却没问题的问题,直接maven install 再用tomcat 跑 比如,xml 路径找不到类,奇葩的报错啊