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地址