只要你付出比别人更多一点点,你会成功的。
jquery + uploadify 实现图片异步上传。(主要用于个人中心的会员头像的剪切上传)
首先下载uploadify和imgareaselect插件。首先加载jq库和upload插件js和imgareaselect插件(要先引入jq库)。
先实现图片上传 首先用
<form>
<input type="file" name="fupload" id="fupload" multiple="true"> //multiple 实现多张图片上传
</form>
<script type="text/javascript">
$(function(){
$("#fupload").uploadify({
'debug' : true, //开启调试
'fileObjName' : 'file', //定义在php文件中接受的键值 $_get['file'];
'fileTypeExts' : '*.jpg; *.png; *.gif', //选择图片时js允许上传的图片类型
'buttonText' : '上传图片', //在按钮上显示的字
'swf' : '__PUBLIC__/uploadify/uploadify.swf', //上传图片的swf
'uploader' : '__URL__/upload', //指定当前php控制器中的方法
'onUploadSuccess' : function(file,data,response){ //上传成功处理函数
var data = parseJSON(data); //获取json数据
if(response){ //如果上传成功
$("#crop").children('img').attr('src','__ROOT__/Public/uploads /'+data.name+'?random'+Math.random()); //添加到img标签中 用于显示上传之后的图片和imgareaselect剪切用
}else{
alet(data.error);
}
}
});
});
</script>
uploadify在线手册地址 :http://www.yauld.cn/uploadifydoc/
imgareaselect 参考地址:http://www.jb51.net/article/28485.htm
之后在php中进行文件上传即可。
php上传处理方法代码:
/**
*上传处理
*/
public function upload(){
$rst=array(); //用于返回结果给前台
$file=$_FILES['file']; //接收uploadify中的file键值
$name=$file['name']; //获取上传文件名
$tmp=$file['tmp_name']; //内存缓存中的名字(暂时)
$type=$file['type']; //文件的类型
$size=$file['size']; //文件大小
$suffix=end(explode('.',$name)); //获取文件的后缀
$path='Public/uploads/'; //文件上传路径 从根目录开始
//允许通过的文件类型
$allow_type=array('png','jpg','gif','jpeg','ico');
if(in_array($suffix,$allow_type) && $size<10000000){ //限定文件大小
$name = 'frank'.date('his').rand(0,100).'.'.$suffix; //重新定义文件名
$save_info = move_uploaded_file($tmp,$path.$name); //文件上传 move_uploaded_file看php手册
if($save_info){
$rst['success'] = '上传成功';
$rst['name'] = $name;
}else{
$rst['error']='文件上传失败';
}
}else{
$rst['error']='只能上传png,jpg,gif,jpeg,ico格式的图片 或者是文件过大';
}
echo json_encode($rst); //通过json方式返回信息给前台做处理
}
imgareaselect 插件的使用。参考地址:http://www.jb51.net/article/28485.htm;
imgareaselect 获取到图片(crop图片),同时把图片信息赋给预览图 之后配置各个选项(如:显示比例等)之后在选择的之后动态分配给预览图高、宽 左边距和上边距 通过css来控制显示在预览图中的效果,代码如下:
function Preview(coords){//coords 是选择时候剪切的图像对象 可以获取信息
// 剪切图片的宽高
var img_width = $('#cropbox').width();
var img_height = $('#cropbox').height();
//根据包裹的容器宽高,设置被除数
var rx = 100 / coords.w;
var ry = 100 / coords.h;
$('#crop-preview-100').css({
width: Math.round(rx * img_width) + 'px',
height: Math.round(ry * img_height) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
。当选择结束之后把具体的参数(左上角的x坐标,左上角的y坐标,需要剪裁的宽和高)如下代码:
onSelectEnd: function (c){ //选择结束时动态赋值,该值是最终传给程序的参数!
$('#x').val(c.x);//需裁剪的左上角X轴坐标
$('#y').val(c.y);//需裁剪的左上角Y轴坐标
$('#w').val(c.w);//需裁剪的宽度
$('#h').val(c.h);//需裁剪的高度
}
获取到input当中提交给后台php,之后php来真正的实现截图。