完整网页代码|把图片转换为base64字符
时间:2021-04-23 15:24:40 阅读:1755
<!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>
点击运行自行测试
网友评论