通过post把base64的值传到后台，然后由后台解析为图片存储到服务器里

最新推荐文章于 2023-05-31 16:08:46 发布

转载最新推荐文章于 2023-05-31 16:08:46 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaolang1/p/4320831.html

文章标签：

#java #后端 #javascript #ViewUI

本文介绍了一种使用Base64编码实现图片上传的方法，并通过JavaScript插件lrz进行图片压缩，确保上传图片大小适中。具体步骤包括前端将图片转换为Base64编码，后端接收并解析该编码，最终存储为图片文件。

 1 // 压缩上传图片的插件
 2     // 通过post把base64的值传到后台，然后由后台解析为图片存储到服务器里
 3     $imgdata_base64=empty($_REQUEST['input_imgdata_base64'])?"":$_REQUEST['input_imgdata_base64'];
 4    if(!$imgdata_base64){
 5        show_aomai_message_for_mobile('请上传身份证图片。。。','返回','','warning');
 6        exit();
 7    }
 8 
 9  
10 
11     $imgData = $imgdata_base64;
12 
13     $base64_body = substr(strstr($imgData,','),1);
14     $data= base64_decode($base64_body );
15 
16 
17     file_put_contents('1.png', $data);
18 
19     echo "ok";die;


js

 1 (function () {
 2     var input = document.getElementById('_phoyo');
 3     input.onchange = function () {
 4         lrz(this.files[0], {width: 800}, function (results) {
 5             // 你需要的数据都在这里，可以以字符串的形式传送base64给服务端转存为图片。
 6             console.log(results);
 7             var input_imgdata_base64 = document.getElementById('idcard_img');
 8             input_imgdata_base64.value=results.base64;
 9 
10 
11 
12 
13         });
14     };
15 
16     //第二个框
17 
18     var input = document.getElementById('_phoyo2');
19     input.onchange = function () {
20         lrz(this.files[0], {width: 800}, function (results) {
21             // 你需要的数据都在这里，可以以字符串的形式传送base64给服务端转存为图片。
22             console.log(results);
23             var input_imgdata_base64_2 = document.getElementById('idcard_img2');
24             input_imgdata_base64_2.value=results.base64;
25 
26 
27 
28 
29         });
30     };