图片转Base64代码实例
分类:实例代码
本章节分享一段代码实例,它实现了将图片转换为Base64格式功能。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style type="text/css"> html { font-family: "microsoft yahei"; overflow: hidden; } html { height: 100%; padding: 0; margin: 0; } a { text-decoration: none; outline: none; } .title { color: #ddd; text-shadow: 2px 2px 5px #000; padding: 80px 0px 0px 100px; } .main, .img_main { float: left; background-color: rgba(255,255,255,.7); border-radius: 4px; padding: 20px; margin: 0 3px; } .main { width: 40%; margin-left: 100px; } .img_main { max-width: 40%; } .preview { width: 100%; } .select-file { border: 1px solid #9B59B6; position: relative; } .select-file:after { content: ''; display: block; clear: both; } .select-file-title, .select-file-btn { float: left; line-height: 30px; height: 30px; } .select-file-title { width: 80%; } .select-file-btn { width: 20%; background-color: #8E44AD; text-align: center; color: #fff; transition: background-color .5s; } .select-file-btn:hover { background-color: #1ABC9C; } .base64-text { background-color: transparent; height: 300px; width: calc(100% - 6px); resize: none; overflow: auto; border: 1px solid #9B59B6; margin-top: 10px; word-break: break-all; } </style> </head> <body> <h1 class="title">图片转Base64</h1> <div class="main"> <div class="control"> <div class="select-file"> <div class="select-file-title"></div> <a href="javascript:;" class="select-file-btn">选择文件</a> </div> </div> <div class="control"> <textarea class="base64-text" readonly></textarea> </div> </div> <div class="img_main"> <img src="" class="preview" /> </div> <script type="text/javascript"> var inputFile = document.createElement('input'); inputFile.type = 'file'; var selectFile = document.querySelector('.select-file'); var base64Text = document.querySelector('.base64-text'); var preview = document.querySelector('.preview'); var reader = new FileReader(); reader.onload = function() { base64Text.innerText = this.result; preview.src = this.result; }; inputFile.addEventListener('change', function() { selectFile.querySelector('.select-file-title').innerHTML = this.value; if (this.files.length == 0) { base64Text.innerText = ''; return; } var file = inputFile.files[0]; base64Text.placeholder = ''; if (!(/^image/.test(file.type))) { base64Text.placeholder = '不是图片文件'; return; } reader.readAsDataURL(file); }); selectFile.addEventListener('click', function() { inputFile.click(); }); </script> </body> </html>
图片转Base64代码实例,这样的场景在实际项目中还是用的比较多的,关于图片转Base64代码实例就介绍到这了。
图片转Base64代码实例属于前端实例代码,有关更多实例代码大家可以查看。
