主要内容:
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地址