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 ...
随机推荐
- Luogu P3619 魔法 【贪心/微扰证明】
题目描述 cjwssb知道是误会之后,跟你道了歉.你为了逗笑他,准备和他一起开始魔法.不过你的时间不多了,但是更惨的是你还需要完成n个魔法任务.假设你当前的时间为T,每个任务需要有一定的限制ti表示只 ...
- Unix\Linux | 总结笔记 | 查看文件的方式
0 目录 vi cat head tail more less 1.vi vi编辑器的内置命令 有些内置命令使用键盘组合键即可完成,有些内置命令则需要以冒号“:”开头输入.常用内置命令如下: Ctrl ...
- 一步一步学习GTK
完成课设,偶然碰到GTK,索性学习一遍 转载自ikoDotA の BLOG (一).一步一步学GTK+之开篇 一.什么是GTK+ GTK+ 是一种函数库是用来帮助制作图形交互界面的.整个函数库都是由C ...
- 菜鸡CodeFoces打卡单
2017.12.13 1:05 签到3题 Educational Codeforces Round 34 (Rated for Div. 2) 补题:
- 题解报告：hdu 1754 I Hate It（线段树）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1754 Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某 ...
- 通过Fiddler监控Java应用发送请求及相应数据
Fiddler可以很好的监控浏览器发送的各种请求及响应数据,对于JAVA程序默认情况下是无法监控的,但实际需求中需要监控JAVA程序发送HTTP请求及返回数据是否正确. Fiddler默认配置的监听端 ...
- Application，Service，Activity 三者的Context的应用场景
Application 的 context 不是万能的,所以也不能随便乱用,对于有些地方则必须使用 Activity 的 Context, 对于Application,Service,Activity ...
- Web自动化测试框架-PO模式
Web自动化测试框架(WebTestFramework)是基于Selenium框架且采用PageObject设计模式进行二次开发形成的框架. 一.适用范围:传统Web功能自动化测试.H5功能自动化测试 ...
- ubuntu14.04 + GTX980ti + cuda 8.0 ---Opencv3.1.0(基础+opecv_contrib)配置
如果喜欢视频的话:YouTube 上有视频教程 https://www.youtube.com/watch?v=1YIAp3Lh5hI 后来我在mac上安装最新版的OpenCV 找到了一片非常详细的教 ...
- .NET 原理之 ViewState
1.从MSDN中我们可以知道一个页面生命周期大约可分为为:页请求.开始.初始化.加载.验证.回发事件处理.呈现.卸载这几个阶段. HttpHandler是无状态的,aspx是高级的Http ...