图片拍照上传 使用fileReader 无需跨域
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <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'; inputFile.accept = 'image/*'; 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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!