JavaScript 通过HTML的FileReader把图片转成base64
2015-10-27 12:31
459 查看
刚接触到一个内联图片的概念,内联图片即使把图片文件编码成base64 看下面代码即是内联问题
代码如下:
现有个需求:
用户头像是存的Base64,有两个方法可以将图片转成base64,一个是上传到后台,通过后台代码处理,一个是前台用js处理,下面是用js处理的例子。
通过HTML5 的 File把图片转成Base64示例代码:
整理上面代码,实现点击img选择图片,然后显示:
代码如下:
<img src="data:image/jpeg;base64,/9j/4QqsRX..." alt="">
现有个需求:
用户头像是存的Base64,有两个方法可以将图片转成base64,一个是上传到后台,通过后台代码处理,一个是前台用js处理,下面是用js处理的例子。
通过HTML5 的 File把图片转成Base64示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单的html5 File测试 for pic2base64</title> <style> </style> <script> window.onload = function(){ var input = document.getElementById("demo_input"); var result= document.getElementById("result"); var img_area = document.getElementById("img_area"); if ( typeof(FileReader) === 'undefined' ){ result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用现代浏览器操作!"; input.setAttribute( 'disabled','disabled' ); } else { input.addEventListener( 'change',readFile,false );} } function readFile(){ var file = this.files[0]; //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件 if(!/image\/\w+/.test(file.type)){ alert("请确保文件为图像类型"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ result.innerHTML = '<img src="'+this.result+'" alt=""/>'; img_area.innerHTML = '<div class="sitetip">图片img标签展示:</div><img src="'+this.result+'" alt=""/>'; } } </script> </head> <body> <input type="file" value="sdgsdg" id="demo_input" /> <br> <textarea id="result" rows=10 cols=100></textarea> <p id="img_area"></p> </body> </html>
整理上面代码,实现点击img选择图片,然后显示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单的html5 File测试 for pic2base64</title> <style> </style> <script> window.onload = function(){ var input = document.getElementById("fielinput"); var txshow= document.getElementById("txshow"); if ( typeof(FileReader) === 'undefined' ){ result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用现代浏览器操作!"; input.setAttribute( 'disabled','disabled' ); } else { input.addEventListener( 'change',readFile,false ); txshow.onclick = function(){ input.click();} } } function readFile(){ var file = this.files[0]; //判断是否是图片类型 if(!/image\/\w+/.test(file.type)){ alert("只能选择图片"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ txshow.src = this.result;} } </script> </head> <body> <input type="file" id="fielinput" style="display:none;"> <img id="txshow" style="width:100px;height:100px;"/> </body> </html>
相关文章推荐
- JS/JQ控制音频的播放和暂停
- php语言中使用json的技巧及json的实现代码详解
- javascript(二)构造函数
- 配置静态文件缓存
- javascript(二)对象的创建和访问
- jsp实现针对excel及word文档的打印方法
- JSP实现的简单分页显示效果代码
- js 数据类型转换
- 106 js判断浏览器内核版本
- js中,for循环里面放ajax,ajax访问不到变量以及每次循环获取不到数据问题总结
- @jsonignore的使用
- JavaScript总结之三
- JavaScript总结之二
- javascript (一)闭包
- javascript的helloWorld
- JavaScript总结之一
- 通过Ajax post Json类型的数据到Controller
- jsp中写java代码的方式
- js用fuction定义构造函数
- JS基于Ajax实现的网页Loading效果代码