php下base64图片上传

主要内容：

1，图片base64转码；

2，h5文件流读取；

3，php保存base64图片；

4，图片上传与保存；

 

用base64上传图片优点：

1，可以采用异步的方式上传，可以不用等服务器响应直接回显页面

2，样式变得自由，不用局限于表单提交

3, 多图的分段提交，减少等待时间

 

html代码:

uploadbtn就是点击上传图片的外观，可以自由设定，

logoshow 图片回显dom

imgupbtn真正意义的文件上传框

<style>
input{
 width:0px;
 height:0px;
 float: left;
}
button{
width:120px;
height:50px;
text-align: center;
background-color:rgba(0,0,0,0.2);
}
</style>
<div id="uploadbtn">
 <span id="logoshow"></span>
 <input id="imgupbtn" type="file"/>
</div>
<button id="uploadimg">
  上传
</button>

js代码:

var adddata={};
$("#uploadbtn").on("click",function(){
 $("#imgupbtn")[0].click()
})
$("#imgupbtn").on("change",function(){
var files = $(this)[0].files[0];
var filename = files.name;
var filetype = files.type.replace(/image/g,"");
var fileReader = new FileReader();
fileReader.readAsDataURL(files);
fileReader.onload =function(readerEvent){
 var str ="url("+readerEvent.target.result+")";
 adddata.logo=readerEvent.target.result;
 adddata.logotype = filetype;
  //回显页面
 $("#logoshow").css("background-image",str);  
 }
})
$("#uploadimg").on("click",function(){
$.ajax({
  type:"post",
  url:"php地址",
  dataType:"json",
  async:true,
  data:adddata,
   success:function(data){
   console.log(data)
  },
    error:function(msg){
      console.log(msg.responseText)
    }
  });
})

php代码：

function saveImg($key,$base64,$imgtype){
$base64=preg_replace("/^(data:s*image/(w+);base64,)/","",$base64);
$imgtype = $imgtype;
$img = base64_decode($base64);
$sqlimgname="/upload/".$key.rand(1000, 9999).".".$imgtype;
$imgname=$_SERVER["DOCUMENT_ROOT"].$sqlimgname;
$a=file_put_contents($imgname,$img);
//返回的是字节数
if($a){  
 return $sqlimgname;
}else{
 return false;
}
}
saveImg("test",$_post["logo"],$_post["logotype"])

注意事项：

①上传地址为相对于php文件的/upload/文件夹下

②该文件夹必须有php有读写权限，否则报错

③key是为了反正重名覆盖的唯一标示，建议可以用uuid替代

④返回值是相对路径，如需绝对路径自行配置

⑤自行替换程序中的php地址为自己的php地址