前端压缩图片+ajax+php 异步上传

首先要引入lrz.mobile.min.js  这个压缩的文件库，里面啥都不用改，只需引入即可，下载地址：http://download.csdn.net/download/qq_21987433/9684816

   引入jq文件库

HTML：

<input class="filetext" type="file" id="idcardimgback"  capture="camera" accept="image/*" onchange="upload(this.id,this,event)" />

Js：

<script>
var url_updatePic="__APP__/Home/UserIndex/updatePic";

function upload(ObgId,Obg,e){
$(".spinner").show();
$("#back").show();
zip_pic(ObgId,Obg,e);
}

function zip_pic(ObgId,obg,e){

  
var imgstr="";
var picsize=obg.files[0].size;
console.log(picsize);
if(picsize>2097152){  //大于2M进行压缩处理

lrz(obg.files[0],{width:1200,quality:0.97},function(rst){
          img = rst.base64;
          var show_img = new Image();
          show_img.src =  rst.base64;
          imgstr=  rst.base64;
           console.log(imgstr);
                     console.log('压缩');
                     switch (ObgId){
case 'idcardimgfront':
data={'idcardimgfront':imgstr};
break;
case 'idcardimgback':
data={'idcardimgback':imgstr};
break;
case 'idcardimghand':
data={'idcardimghand':imgstr};
break;

};

   
 $.ajax({
type:"post",
url:url_updatePic,
async:false,
data:data,
success:function(json){
var json = eval('(' + json + ')');
if(json.state==1){
$(".spinner").hide();
$("#back").hide();
$("#"+ObgId).prev().prop('src',imgstr);
}
}
});
    
    
    
});
}else{
//小于2M不压缩
 //
var reader = new FileReader();
    reader.onload = (function (file) {
      return function (e) {
         
             var show_img = new Image();
            show_img.src =  this.result;
imgstr= this.result;
console.log('不压缩');
  console.log(imgstr);
  switch (ObgId){
case 'idcardimgfront':
data={'idcardimgfront':imgstr};
break;
case 'idcardimgback':
data={'idcardimgback':imgstr};
break;
case 'idcardimghand':
data={'idcardimghand':imgstr};
break;

};
 console.log(data);
   $.ajax({
type:"post",
url:url_updatePic,
async:false,
data:data,
success:function(json){
var json = eval('(' + json + ')');
if(json.state==1){
$(".spinner").hide();
$("#back").hide();
$("#"+ObgId).prev().prop('src',imgstr);
}
}
});


        };
    })(e.target.files[0]);
    reader.readAsDataURL(e.target.files[0]);
}



 
}
</script>

php：

//更换身份证图片
public function updatePic(){
if(I('idcardimgfront')){
$imgstr[0]=I('idcardimgfront');
$imgstr[1]="idcardimgfront";

}
if(I('idcardimgback')){
$imgstr[0]=I('idcardimgback');
$imgstr[1]="idcardimgback";

}
if(I('idcardimghand')){
$imgstr[0]=I('idcardimghand');
$imgstr[1]="idcardimghand";

}
       $userid=session('useridA');
  if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $imgstr[0], $result)){
$type = $result[2];

$new_file = "./Public/Imagessm/";
if(!file_exists($new_file))
{
//var_dump(111111);
//检查是否有该文件夹，如果没有就创建，并给予最高权限
mkdir($new_file, 0700);
}
$new_file = $new_file.uniqid().".{$type}";
if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $imgstr[0])))){
//echo '新文件保存成功：', $new_file;
     $new_file=substr($new_file, 1);
 $where['phonenum']=$userid;
 $data[$imgstr[1]]=$new_file;
 M('userinfo')->where($where)->save($data);
 $arr['state']=1;
$arr['msg']='图片上传成功';
$this->ajaxReturn($arr,'json');
  
}else{
// echo '新文件保存失败';die;
                      $arr['state']=0;
$arr['msg']='保单上传失败';
$this->ajaxReturn($arr,'json');
}
}
}