使用HTML5的File实现base64和图片的互转
导读：收集整理的这篇文章主要介绍了使用HTML5的File实现base64和图片的互转，觉得挺不错的，现在分享给大家，也给大家做个参考。 刚接触到一个内联图片的概念，内联图片即使把图片文件编码成base64 看下面代码即是内联问题 可以...
收集整理的这篇文章主要介绍了使用HTML5的File实现base64和图片的互转，觉得挺不错的，现在分享给大家，也给大家做个参考。 刚接触到一个内联图片的概念，内联图片即使把图片文件编码成base64 看下面代码即是内联问题 可以减少http的请求，缺点是不能跨域缓存！
复制代码代码如下:
img src="data:image/jPEg; base64,/9j/4QQsRX..." alt="">
然后在线如何把图片转化成base64
如果只依靠单纯的javascript是有权限问题的 js不允许操作本地的file文件或文件夹 为了安全问题
现在htML5来了 百度了下有不少资料 中文的也不少 给下w3c的文档 http://www.w3.org/TR/FileAPI/
现在我们用html5的file api里的 readAsDataurl函数 这是一个把文件转化成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" />
textarea id="result" rows=30 cols=300> /textarea>
p id="img_area"> /p>
/body>
/html>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 使用HTML5的File实现base64和图片的互转
本文地址： https://pptw.com/jishu/585230.html