写在前面：这里提供一种解决问题思路，跟什么语言无关，可具体问题具体分析；
这里用到的是PHP，框架是Laravel.
/**
* 1、前端访问页面的时候会请求路径，然后调用路由，请求PHP文件，获取数据之后返回给前端
* 这里使用访问页面的时间作为唯一标识，生成二维码图片
* 二维码图片里面信息包括:
*
* 扫一扫上传图片 - 后端 - 代码
*/
//当前时间 $rs['current']=time(); //二维码保存地址 $PNG_WEB_DIR = 'uploads/qr/'; //加载二维码生成类 include "phpqrcode/qrlib.php"; //设置二维码容错等级 $errorCorrectionLevel = 'H'; //生成图片的大小 $matrixPointSize = 4; //扫描二维码访问的地址 - 带上当前访问时间作为唯一标识 $data='http://'.$_SERVER['HTTP_HOST'].'/qr-upload?time='.$rs['current']; //生成二维码文件 // uploads/qr/sfwer9234-98252-359-235.png $filename = $PNG_WEB_DIR.md5($data.'|'.$errorCorrectionLevel.'|'.$matrixPointSize).'.png'; // php 生成二维码类： // 参数介绍： // 第1个参数$text：二维码包含的内容，可以是链接、文字、json字符串等等； // 第2个参数$outfile：默认为false，不生成文件，只将二维码图片返回输出；否则需要给出存放生成二维码图片的文件名及路径； // 第3个参数$level：默认为L，这个参数可传递的值分别是L(QR_ECLEVEL_L，7%)、M(QR_ECLEVEL_M，15%)、Q(QR_ECLEVEL_Q，25%)、H(QR_ECLEVEL_H，30%)这个参数控制二维码容错率，不同的参数表示二维码可被覆盖的区域百分比，也就是被覆盖的区域还能识别； // 第4个参数$size：控制生成图片的大小，默认为4； // 第5个参数$margin：控制生成二维码的空白区域大小； // 第6个参数$saveandprint：保存二维码图片并显示出来，$outfile必须传递图片路径； QRcode::png($data, $filename, $errorCorrectionLevel, $matrixPointSize, 2); //二维码输出路径，获取二维码给前端进行展示 $rs['qr_img']=HTML::image($PNG_WEB_DIR.basename($filename));
/**
* 2、拿到后端返回的数据进行输出绑定
* 前端代码
*/
<div role="tabpanel" class="tab-pane active text-center qr-img" id="p1">
<p>
{{$qr_img}} //展示二维码 - 一张图片
<span>扫描左侧二维码即可上传照片</span>
</p>
//当前访问地址的时间，由后台返回 - 后续用来查图片进行展示
<span class="btn btn-info ae-uploaded" data-biaoshi="{{$current or ''}}">我已上传图片</span>
</div>
/**
* 3、手机扫码进行上传操作
* 扫码之后跳转到H5页面，进行上传图片
* 扫码：
* 后端代码：
*/
$rs['time']=Input::get('time'); //获取前端传过来的时间进行过期判断，如果过期返回错误提示
/**
* 4、前端绑定后端传过来的数据，进行展示
* 在这里进行上传图片操作，上传之后返回图片地址；
* 前端代码：
*/
{{Form::open(['url'=>URL::current(),'enctype'=>'multipart/form-data','id'=>'cdc'])}}
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<div id="queue" class="ht30" style="display:none;"></div>
</div>
<div class="col-md-12 mt10">
<div class="db bgwh ht200 p-plus" id="i1">身份证正面</div>
<input type="file" id="s1" class="btn btn-primary btn-lg mt10 whp100">
<span class="msg-box" for="h1"></span>
</div>
<div class="col-md-12 mt10">
<div class="db bgwh ht200 p-plus" id="i2">身份证背面</div>
<input type="file" id="s2" class="btn btn-primary btn-lg mt10 whp100">
<span class="msg-box" for="h2"></span>
</div>
<div class="col-md-12 mt10">
<div class="db bgwh ht200 p-plus" id="i3">手持正面</div>
<input type="file" id="s3" class="btn btn-primary btn-lg mt10 whp100">
<span class="msg-box" for="h3"></span>
</div>
{{Form::hidden('biaoshi',$time)}}
<input type="hidden" name="h1" data-rule="required;">
<input type="hidden" name="h2" data-rule="required;">
<input type="hidden" name="h3" data-rule="required;">
<div class="col-md-12 mt20 ">
<button class="btn btn-danger btn-lg whp100">上 传</button>
</div>
</div>
</div>
{{Form::close()}}
$("#s1").UploadImg({
url : "/qr-upload.php",
width : "640",
quality : "0.7", //压缩率，默认值为0.7
mixsize : "10000000",
before : function(blob){
$("#i1").html(hh);
},
error : function(d){
$("#i1").html('上传失败请重新上传');
},
success : function(d){
$("#i1").html('<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/'+d+'" class="img-responsive bim">');
$("input[name='h1']").val("/"+d);
}
});
//剩余两个省略........
/**
* 5、上传之后进行保存到数据库：
* 数据库字段:pic1,pic2,pic3,unique-id(浏览页面的时间戳，进行唯一标识处理)
* 这里保存到数据库的是上一步上传之后返回的图片地址：
* 保存成功之后跳转到上传成功页面：
* 代码如下：
*/
public function qrpost(){
$input=Input::all();
$arr['pic1']=$input['h1'];
$arr['pic2']=$input['h2'];
$arr['pic3']=$input['h3'];
$arr['biaoshi']=$input['biaoshi'];
Lice::create($arr);
return Redirect::to('/qrok');
}
/**
* 6、保存到数据库之后（上传成功之后），PC浏览器点击按钮“我已上传图片”，AJAX拿着上面第二步前端绑定的时间值，去查出来刚上传的图片：
* 前端代码：
*/
$(".ae-uploaded").click(function () {
var biaoshi = $(this).attr("data-biaoshi"); //这里获取的"attr"就是时间唯一标识
var str;
$.ajax({
type: "post",
dataType: "json",
data: {"biaoshi": biaoshi},
url: "/qr-fetch",
success: function (d) {
if(d.flag) {
str = '<img style="height:127px" class="img-responsive ml10" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="' + d.file.pic1 + '">';
str += '<img style="height:127px" class="img-responsive ml10" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="' + d.file.pic2 + '">';
str += '<img style="height:127px" class="img-responsive ml10" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="' + d.file.pic3 + '">';
$(".qr-img").html(str);
$("input[name='package[pic1]']").val(d.file.pic1);
$("input[name='package[pic2]']").val(d.file.pic2);
$("input[name='package[pic3]']").val(d.file.pic3);
$(".uploaded").hide();
}else {
alert("上传失败,请重新在手机上传");
}
}
});
});
//后端代码
public function qrfetch(){
$biaoshi=Input::get('biaoshi');
$info=Lice::where('biaoshi',$biaoshi)->select('pic1','pic2','pic3')->first();
if($info){
return Response::json(['flag'=>true,'file'=>$info]);
}else{
return Response::json(['flag'=>false]);
}
}
/**
* 7、PC得到上传之后的图片地址，进行展示，然后可进行接下来的操作，把图片和当前用户绑定起来即可，具体要看业务怎么实现了
* 这里只是说明一下上传之后展示和当前PC登录的用户如何绑定，自己可去实现
*/
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦