AJAX异步上传图片，JavaScript 图片转Base64 编码

川长思鸟来 2022-05-25 10:06 275阅读 0赞

![这里写图片描述][70]  
用AJAX给数据库添加图片的时候，需要先把图片 转成编码才行，  
记录一下。 ![这里写图片描述][70 1]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <input type="file" name="security_pic" id="file" class="uploadInput" style="width:80px;height:75px;left:50px;" accept="image/jpg,image/jpeg,image/png,image/bmp" onchange="gen_base64()" multiple />
    
    
    <script> function $_(id) { return document.getElementById(id); } function gen_base64() { var file = $_('file').files[0]; if(!/image\/\w+/.test(file.type)){ alert("请确保文件为图像类型"); $_('upload_file').disabled = false; return false; } var r = new FileReader(); //本地预览 r.onload = function(){ var tmpData = r.result; console.log(tmpData); }; r.readAsDataURL(file); //Base64 } </script>
    
    </body>
    </html>

控制台输出：  
![这里写图片描述][70 2]

这里有一大堆已经转换完成的Base64编码，看不懂不要紧，计算机能看懂就行。 ╮(╯\_╰)╭

![这里写图片描述][70 3]

再提供一个在线互相转码的地址：  
[http://imgbase64.duoshitong.com/][http_imgbase64.duoshitong.com]

[70]: /images/20220525/f70b68bb89ce49ab92f9ec1930a808bc.png
[70 1]: /images/20220525/157b550ad01a48cc8802893cbfb03f98.png
[70 2]: /images/20220525/213d045e37ca434b860c76309af17a41.png
[70 3]: /images/20220525/f938e93f008e47fb9cd686dc98fc535b.png
[http_imgbase64.duoshitong.com]: http://imgbase64.duoshitong.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，275人围观）

还没有评论，来说两句吧...

相关阅读

相关 Base64编码转图片

Base64编码转图片 - 一个工具箱 - 好用的在线工具都在这里！

本是古典何须时尚/ 2024年05月02日 20:20/ 0 赞/ 70 阅读

相关 Base64编码转图片在线

[Base64在线转换图片\_图片转Base64\_在线base64图片转换工具\_yzc工具网][Base64_Base64_base64_yzc] [Base64_Ba

朱雀/ 2024年02月20日 11:54/ 0 赞/ 111 阅读

相关 base64编码转图片格式

base64编码转图片格式 <!DOCTYPE html> <html lang="en"> <head> <meta chars

╰半夏微凉°/ 2023年01月01日 04:58/ 0 赞/ 272 阅读

相关图片上传(Base64)

图片上传(Base64) HTML <label for="pic_upload" class="file-update-title"> 标

野性酷女/ 2022年06月17日 11:16/ 0 赞/ 377 阅读

相关 base64转图片图片转base64

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

本是古典何须时尚/ 2022年06月17日 05:09/ 0 赞/ 380 阅读

相关 AJAX异步上传图片，JavaScript 图片转Base64 编码

![这里写图片描述][70] 用AJAX给数据库添加图片的时候，需要先把图片转成编码才行，记录一下。 ![这里写图片描述][70 1] <!DOCTYPE

川长思鸟来/ 2022年05月25日 10:06/ 0 赞/ 276 阅读

相关图片url转base64编码

Html <input type='file' class='upload-img' /> JQ $('.upload-img').on('change'

古城微笑少年丶/ 2022年03月17日 05:46/ 0 赞/ 438 阅读

相关图片上传 Base64 编码解码转换

图片上传 Base64 编码解码转换图片上传时往往进行压缩处理，将压缩后的图片再传输给后端，这里以Base64编码来替代压缩，仅作演示，附Demo，前后端代码 Ht

我就是我/ 2022年02月20日 04:00/ 0 赞/ 368 阅读

相关 javascript 图片预览(base64 上传)

示例图： ![20190528232119382.gif][] 源码： <!DOCTYPE html> <html lang="en"> <hea

短命女/ 2022年01月26日 11:43/ 0 赞/ 527 阅读

相关 uniapp--上传图片转base64

最近后端接口更新，需要使用图片Base64+图片类型（png/jpg等）上传; 试了好多兼容小程序的方法; 小程序参考[uni-app上传图片转base64\_网络\_

以你之姓@/ 2021年09月13日 16:02/ 0 赞/ 1339 阅读