前端代码
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>上传图片</title>
</head>
<style>
body {
margin: 20px 20%;
color:#777;
text-align: center;
}
</style>
<body>
<h1 class="text-center">-本地压缩 1.0</h1>
<hr />
<input type="file" id="articleImgBtn" name="file" accept="image/*" />
<hr />
<img id="articleImg" width="180" height="100">
<script src="static/jquery.min.js" type="text/javascript"></script>
<script src="static/localResizeIMG.js?=12121" type="text/javascript"></script>
<script src="static/mobileBUGFix.mini.js" type="text/javascript"></script>
<script type="text/javascript">
$('#articleImgBtn').localResizeIMG({
width: 1000,
quality: 0.8,
success: function (result) {
$('#articleImg').attr("src",result.base64);
var imgPath = result.base64;
var reads = new FileReader();
if (typeof (FileReader) === 'undefined') {
alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");
} else {
// console.log(reads);
// return;
$.ajax({
type: "POST",
url: 'upload.php', //jsonp跨域，但不支持POST请求
data: {file: imgPath}, //视情况将base64的前面字符串data:image/png;base64,删除
cache: false,
success: function (data) {
console.log(data);
var result = JSON.parse(data);
if (result.code>0) {
$("#articleImg").attr("src",result.image);
alert("上传成功");
}else{
alert(result.message);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("上传失败，请检查网络后重试");
}
});
}
}
});
</script>
</body>
</html>后端代码
//接收base64数据
$image= $_POST['file'];
//设置图片名称
$imageName = "25220_".date("His",time())."_".rand(1111,9999).'.png';
//判断是否有逗号 如果有就截取后半部分
if (strstr($image,",")){
$image = explode(',',$image);
$image = $image[1];
}
//设置图片保存路径
$path = "./uploads/".date("Ymd",time());
//判断目录是否存在 不存在就创建
if (!is_dir($path)){
mkdir($path,0777,true);
}
//图片路径
$imageSrc= $path."/". $imageName;
//生成文件夹和图片
$r = file_put_contents($imageSrc, base64_decode($image));
if (!$r) {
$res=['code'=>-1,'image'=>$imageSrc,'message'=>'图片生成失败'];
}else {
$res=['code'=>1,'image'=>$imageSrc,'message'=>'图片生成成功'];
}
echo json_encode($res);
die();