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 ...
随机推荐
- Activiti6.0教程 Service用途剖析 （二）
这节我们学习下Activiti的7大对象,首先我们从ProcessEngine接口开始看. /* Licensed under the Apache License, Version 2.0 (the ...
- ios手机Safari本地服务连不上
问题: 今天在本地起服务准备测下ios手机端页面,结果发现:页面可以打开,但是登录不上. 用alert定位了下,await fn() 报错被try()catch(){}捕获了... 原因: 该机子不支 ...
- 小心我“DIR”溢出你！
转自https://blog.csdn.net/wql19881207/article/details/6300760 https://blog.csdn.net/wql19881207/articl ...
- RMAN-06564错误的原因及解决办法
今日在进行数据库恢复时,遭遇RMAN-06564错误,如下: RMAN> restore spfile from autobackup; Starting restore at 01-NOV-1 ...
- HBase Region Assign流程详解
Hbase是kv存储,但是逻辑上我们可以把存储在hbase上的kv数据当成表,rowkey可以认为是表的主键.为了便于分布式操作,hbase会把表横向切分成一块一块的数据,而每块就是一个Region. ...
- SQL Server Management Studio 手动导入Excel文件
SQL Server Management Studio(企业管理器) 手动导入Excel文件,有时间还是非常方便的,省去了写代码的麻烦. 具体步骤如下: 下面附上 创建游标的方法(用于循环读取临时表 ...
- C#过时方法标记
1.当遇到过时或废弃的方式 函数怎么办 [Obsolete]特性解决你的困惑 1.1:当方法已经完成相关兼容 可以保留时
- greenplum安装札记（待完善）
1.安装配置 1.1硬件配置 硬件服务器用到某私有云中ip段为192.168.228.111-192.168.228.120的十台服务器,相关主要配置如下表: 类别 主机名 IP 内存 硬盘 主要目录 ...
- 移动端使用页尾文字使用绝对定位遇到input框会飘起来的处理方案
如下版权信息的样式在遇到input框的时候会跟随输入框其后 优雅的解决方式:(定位遇上键盘飘窗解决) mounted里面写上:var originalHeight=document.documentE ...
- 字符串（String）几个常用方法的详解
String:(字符串) indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. stringObject.indexOf(searchvalue,fromindex) searc ...