JavaScript：获取上传图片的base64
文章来源: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的更多相关文章
- javascript获取上传图片的大小
javascript获取上传图片的大小 <pre><input id="file" type="file"> <input id= ...
- JS上传图片-通过FileReader获取图片的base64
下面文章,我想要的是: FileReader这个对象,可以借助FileReader来获取上传图片的base64,就可以在客户端显示该图片了.同时,还可以把该图片的base64发送到服务端,保存起来. ...
- 关于前端使用JavaScript获取base64图片大小的方法
base64原理 Base64编码要求把3个8位字节(38=24)转化为4个6位的字节(46=24),之后在6位的前面补两个0,形成8位一个字节的形式. 如果剩下的字符不足3个字节,则用0填充,输出字 ...
- JavaScript怎么上传图片
JavaScript怎么上传图片 在XMLHttpRequest Level2出台之前,大多数的异步上传图片都是利用iframe去实现的. 至于具体的实现细节,我就不在这边啰嗦的,Google一下就有 ...
- JS 获取图片的base64编码
获取图片的base64编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- JavaScript学习总结(十八)——JavaScript获取浏览器类型与版本
从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: 1 <script type="text/javascript"> 2 v ...
- Javascript 验证上传图片大小[客户端验证]
需求分析: 在做上传图片的时候,如果不限制上传图片大小,后果非常的严重.那么我们怎样才可以解决一个棘手的问题呢?有两种方式: 1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上, ...
- 客户端用javascript获取文件大小
客户端用javascript获取文件大小 1 ie实现代码如下: <script type="text/javascript" language="javascri ...
- JavaScript获取客户端计算机硬件及系统等信息的方法
JavaScript获取客户端计算机硬件及系统等信息的方法 JavaScript 获取客户端计算机硬件及系统信息 通过WMI来实现获取客户端计算机硬件及系统信息: function getSysInf ...
随机推荐
- java web课程设计截图和服务器地址
企业办公测试截图和服务器地址 本篇博客主要围绕以下几个部分展开,登录.系统管理.工作流.个人事务管理.内部邮件.公共信息共六个部分.主要有界面截图和简要介绍. 一.登录.更改密码界面 登录界面包括以管 ...
- Redis操作命令大全
一.key pattern 查询相应的key (1)redis允许模糊查询key 有3个通配符 *.?.[] (2)randomkey:返回随机key (3)type key:返回key存储的类型 ...
- [CERC2017]Buffalo Barricades
这个题目,扫描线+玄学** 大概操作就是用个扫描线从上往下扫. 博主有点懒,就直接贴代码了,但是我还是给大家贴个比较详细的博客,除了代码都可以看wym的博客,我基本上就是按wym大佬的思路来的,当然, ...
- Ubuntu install and uinstall
一.Ubuntu中软件安装方法 1.APT方式 (1)普通安装:apt-get install softname1 softname2 -; (2)修复安装:apt-get -f install so ...
- 窗体WINFORM
窗体的事件:删除事件:先将事件页面里面的挂好的事件删除,再删后台代码里面的事件 Panel是一个容器 1.Label -- 文本显示工具Text:显示的文字取值.赋值:lable1.Text 2.Te ...
- AJPFX关于面向对象中的对象初始化整理，综合子父类、代码块等等
今天总结了一下子父类当中含有静态代码块.代码块.构造函数.成员变量.子类复写父类方法时子类的初始化过程,把思路理清一下 class Fu { //父类成员变量 private int num = 3; ...
- git ---查看工作状态和历史提交
1.git查看状态 -git status 2.版权声明 版权声明:新建一个 LICENSE.txt 文件 开源协议:MIT //开源许可里面的最宽松的一个协议,别人可以随便用你的代码,但 ...
- spring jdbc 批处理插入主健重复的数据
1.有事务:当调用spring jdbc 的批处理的时候,在实现层加入事物,只要有插入异常的数据,整个批处理操作都会回滚.事务保证操作的原子性. 2.无事务:当没有事务的时候,批处理插入数据的时候,若 ...
- TNS-00511: 无监听程序
这里到服务里面打开 tns 的监听服务
- mongodb用户权限管理(二)
数据库 分配用户权限 有了创建语法,和参数说明,接下来开始实践. 注意,还有一点,账号是跟着数据库绑定的,在那个库里授权,就在那个库里验证(auth) 否则会失败 创建 账号管理授权权限 的账号 &g ...