saveFile类使用说明文档
2020年12月3日
1，我们需要3个文件：test.html+testSave.php+savePic.ajax.php
test.html前端代码，有按钮可以上传图片（到savePic.ajax.php），有按钮可以保存结果（到testSave.php）
我们先看看test.html的代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{font-family:'microsoft yahei';color:#4A4A4A;}
#upload{width:700px;padding:20px;border:1px dashed #ccc;margin:100px auto;border-radius:5px;}
#uploadBox{width:100%;height:35px;position:relative;}
#uploadBox input{width:200px;height:30px;background:red;position:absolute;top:2px;left:0;z-index:201;opacity:0;cursor:pointer;}
#inputCover{width:200px;height:30px;position:absolute;top:2px;left:0;z-index:200;text-align:center;line-height:30px;font-size:14px;border:1px solid #009393;border-radius:5px;cursor:pointer;}
button{width:100px;height:30px;border-radius:5px;border:1px solid #ccc;background:#F0F0F0;outline:none;cursor:pointer;}
button:hover{background:#E0E0E0;}
#ccc;background:#F0F0F0;outline:none;cursor:pointer;}
#processBar{display:inline-block;width:0;height:7px;position:absolute;left:500px;top:14px;background:#009393;}
#processNum{position:absolute;left:620px;color:#009393;font-size:12px;line-height:35px;}
#show {text-align: center;line-height:28px;}
</style>
</head>
<body>
<div id="upload">
<div id="uploadBox">
<span id="inputCover">选择文件</span>
<form enctype="">
<input type="file" name="file" id="file" accept="image/jpeg,image/png,image/gif,audio/*,video/*" />
<button type="button" id="submit" style="position:absolute;left:230px;top:2px;">上传</button>
</form>
<span id="processBar"></span>
<span id="processNum">未选择文件</span>
</div>
</div>
<div id="show"></div>
<button type="button" id="confirmbtn" style="display:block;margin:0 auto;margin-top:30px;">保存</button>
<script type="text/javascript" src="//static.vancdn.com/public/js/jquery/jquery-1.12.4.min.js"></script>
<script type="text/ecmascript">
$(document).ready(function(){
var inputCover = $("#inputCover");
var processNum = $("#processNum");
var processBar = $("#processBar");
//上传准备信息
$("#file").change(function(){
var file = document.getElementById('file');
var fileName = file.files[0].name;
var fileSize = file.files[0].size;
processBar.css("width",0);
if(fileSize > 1024*2*1024){
inputCover.html("<font>文件过大，请重新选择</font>");
processNum.html('未选择文件');
$('#file').value = '';
return false;
}
else{
inputCover.html(fileName+' / '+parseInt(fileSize/1024)+'KB');
processNum.html('等待上传');
}
//开始上传
startUpload();
})
//创建ajax对象，发送上传请求
function startUpload(){
var file = document.getElementById('file').files[0];
var formData = new FormData();
formData.append('fileInputName',file);
$.ajax({
url: 'savePic.ajax.php',
async: true,
type: 'post',
data: formData,
dataType : 'json',
processData: false,
contentType: false,
xhr:function(){
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
myXhr.upload.addEventListener('progress',function(e){
var loaded = e.loaded;
var total = e.total;
var percent = Math.floor(100*loaded/total);
processNum.text(percent+"%");
processBar.css("width",percent+"px");
}, false);
}
return myXhr;
},
success: function(data){
if(data.status=='ok'){
if(typeof(pics)=="undefined"){
pics=[];
}
var pic=data.res.path+data.res.name+data.res.ext;
pics.push({pic:pic,moveKey:data.res.moveKey});
$("#show").html('<span style="color:green;">文件上传成功</span>'+'<br />文件目录：'+data.res.path+'<br />文件名称：'+data.res.name+'<br />文件拓展名：'+data.res.ext+'<br />完整url：//save.vancdn.com/'+(data.res.path+data.res.name+data.res.ext)+'<br />文件大小：'+data.res.size+'（'+data.res.size+'/1024='+parseInt(data.res.size/1024)+'KB）<br />移动key：'+data.res.moveKey+'<br /><br />');
}else{
$("#show").html('<span style="color:red;">'+data.errorStr+'</span>');
}
}
})
}
$(document).on("click","#confirmbtn",function(){
if(typeof(pics)=="undefined"){
pics=[];
}
$.post('testSave.php',{pics:JSON.stringify(pics)},function(data){console.log(data);
if(data.status=='ok'){
alert("操作成功");
}
},"json");
});
})
</script>
</body>
</html>在来看看savePic.ajax.php负责保存图片到服务器的代码：
<?php
header('content-type:text/plain; charset=utf-8');
//配置上传图片的参数
$saveFileData=array(
'allowExt'=>array('image/png','image/jpeg','image/gif'),
'allowSize'=>5120000,
'fileInput'=>'fileInputName',
//缩略图路径说明（thumb数组中的waterImg也适用本说明）
//1:参数为水印图片路径，比如:http://static.vancdn.com/public/img/water/watermark.pngwater.png，只需要传递：public/img/water/watermark.png
//2:$config['waterImg']是指原图是否需要水印,,如果设置则最原始图片会被水印图覆盖（不保留原图,只会生成一个带水印的原图）
//3:$config['thumb']数组中的waterImg为缩略图使用的水印图片地址（参数格式和说明1一致）
'waterImg'=>'public/img/water/water.jpg',
'waterPos'=>0,
'thumb'=>array(
//缩略图：多个请指定多个数组，缩略图宽度，缩略图名称前缀，缩略图是否需要增加水印(参数为水印图片路径)
array('sizeWidth'=>750,'name'=>'_middle','waterImg'=>'public/img/water/water.middle.jpg','waterPos'=>-1),
array('sizeWidth'=>450,'name'=>'_small','waterImg'=>'public/img/water/water.small.png','waterPos'=>-1),
)
);
//实例化并保存图片
require '../../../../config/class/saveFile.php';
require '../../../../class/saveFile.php';
$saveFile=new saveFile($saveFileData,$saveFileConfig);
echo json_encode($saveFile->save());
?>当图片保存成功后会返回结果到js，test.html再保存数据post到testSave.php
我们再看看testSave.php的代码
<?php
header('content-type:text/plain; charset=utf-8');
//开始处理图片,先pics并进行一些判断
/*
$_POST['pics']是ajax返回给js,js再通过：
if(typeof(pics)=="undefined"){pics=[];}
var pic=data.res.path+data.res.name+data.res.ext;
pics.push({pic:pic,moveKey:data.res.moveKey});
*/
$pics=json_decode($_POST['pics'],true);
if(!is_array($pics)){
//进行自己的业务逻辑处理
//exit(json_encode(array('status'=>'error','errorStr'=>'参数错误')));
}
//配置保存图片的参数
$moveFileData=array(
'moveSite'=>SITE,//需要操作的站点
'moveTo'=>'c',//允许的移动至目录类型
'moveToDeep'=>'hy',//移动到moveTo的子目录（比如hy）
//要处理的图片：多个请指定多个数组，图片路径，图片移动的key 格式：array(array('pic'=>'202009/10/18/84c12c85071d81ec34g5hlBVM-.png','movekey'=>'62126eb7aae701f6968f13731f9b6e09'))
'pics'=>$pics,
'thumb'=>array('_middle','_small')//缩略图：多个请指定多个数组，缩略图名称前缀
);
//实例化并移动图片
require '../../../../config/class/saveFile.php';
require '../../../../class/saveFile.php';
$saveFile=new saveFile($moveFileData,$saveFileConfig);
echo json_encode($saveFile->move());
?>逻辑大概就是先单独保存图片，成功后，再移动。
下面贴出注释和使用说明：
/*
save操作示例：
header('content-type:text/plain; charset=utf-8');
//配置上传图片的参数
$saveFileData=array(
'allowExt'=>array('image/png','image/jpeg','image/gif'),
'allowSize'=>5120000,
'fileInput'=>'fileInputName',
//缩略图路径说明（thumb数组中的waterImg也适用本说明）
//1:参数为水印图片路径，比如:http://static.vancdn.com/public/img/water/watermark.pngwater.png，只需要传递：public/img/water/watermark.png
//2:$config['waterImg']是指原图是否需要水印,,如果设置则最原始图片会被水印图覆盖（不保留原图,只会生成一个带水印的原图）
//3:$config['thumb']数组中的waterImg为缩略图使用的水印图片地址（参数格式和说明1一致）
'waterImg'=>'public/img/water/water.jpg',
'waterPos'=>0,
'thumb'=>array(
//缩略图：多个请指定多个数组，缩略图宽度，缩略图名称前缀，缩略图是否需要增加水印(参数为水印图片路径)
array('sizeWidth'=>750,'name'=>'_middle','waterImg'=>'public/img/water/water.middle.jpg','waterPos'=>-1),
array('sizeWidth'=>450,'name'=>'_small','waterImg'=>'public/img/water/water.small.png','waterPos'=>-1),
)
);
//实例化并保存图片
require '../../../../config/class/saveFile.php';
require '../../../../class/saveFile.php';
$saveFile=new saveFile($saveFileData,$saveFileConfig);
echo json_encode($saveFile->save());
=======================
move操作示例：
header('content-type:text/plain; charset=utf-8');
//处理图片之前的一些逻辑和数据操作
//开始处理图片,先pics并进行一些判断
//$_POST['pics']是ajax返回给js,js再通过：
//if(typeof(pics)=="undefined"){pics=[];}
//var pic=data.res.path+data.res.name+data.res.ext;
//pics.push({pic:pic,moveKey:data.res.moveKey});
$pics=json_decode($_POST['pics'],true);
if(!is_array($pics)){
//进行自己的业务逻辑处理
//exit(json_encode(array('status'=>'error','errorStr'=>'参数错误')));
}
//配置保存图片的参数
$moveFileData=array(
'moveSite'=>SITE,//需要操作的站点
'moveTo'=>'c',//允许的移动至目录类型
'moveToDeep'=>'hy',//移动到moveTo的子目录（比如hy）
//要处理的图片：多个请指定多个数组，图片路径，图片移动的key 格式：array(array('pic'=>'202009/10/18/84c12c85071d81ec34g5hlBVM-.png','moveKey'=>'62126eb7aae701f6968f13731f9b6e09'))
'pics'=>$pics,
'thumb'=>array('_middle','_small')//缩略图：多个请指定多个数组，缩略图名称前缀
);
//实例化并移动图片
require '../../../../config/class/saveFile.php';
require '../../../../class/saveFile.php';
$saveFile=new saveFile($moveFileData,$saveFileConfig);
echo json_encode($saveFile->move());
*/
近期评论