完整网页代码|把图片转换为base64字符

时间:6个月前   阅读:281
 <!Doctype html>
  <html>
  <head>
  <meta charset="utf-8" />
  <title>Zshao网络-图片转base64</title>
  </head>
  <body>
  <script type="text/javascript">
  window.onload = function(){ 
 // 抓取上传图片,转换代码结果,显示图片的dom
 var img_upload=document.getElementById("img_upload");
 var base64_code=document.getElementById("base64_code");
 var img_area=document.getElementById("img_area");
 // 添加功能出发监听事件
 img_upload.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(){
 base64_code.innerHTML = this.result; 
 img_area.innerHTML = '<div>图片img标签展示:</div><img src="'+this.result+'" alt=""/>'; 
 }
}
</script>
<!--这个是附带的功能,可以删除-->
<style>
a:after {content: " (" attr(href) ")";}
</style> 
<!--这个是附带的功能,可以删除-->
<input type="file" id="img_upload"/>
<textarea id="base64_code" rows="30" cols="360"></textarea>
<p id="img_area"></p>
</body>
</html>

点击运行自行测试

上一篇:html代码|点击连接弹出两个页面

下一篇:完整网页代码|引导页-导航页源码01款

网友评论