扫码上传图片实现思路以及代码展示@慕课网原创_慕课网

写在前面：这里提供一种解决问题思路，跟什么语言无关，可具体问题具体分析；

这里用到的是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 src="/'+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" src="' + d.file.pic1 + '">';
          str += '<img style="height:127px" class="img-responsive ml10" src="' + d.file.pic2 + '">';
          str += '<img style="height:127px" class="img-responsive ml10" src="' + 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登录的用户如何绑定，自己可去实现
   */

扫码上传图片实现思路以及代码展示原创