thinkphp 无刷新上传头像 有dialog弹出层对话框效果 有水印功能
运用的是jquery中的插件，温馨提示请下载好js。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>适友注册</title>
<link rel="stylesheet" type="text/css" href="__TEST__/css/login.css">
</head>
<script language="javascript" src="__TEST__/js/jquery-1.7.1.js"></script>
<script language="javascript" src="__TEST__/js/jquery-ui-1.8.18.custom.min.js"></script><script language="javascript" src="__TEST__/js/ajaxfileupload.js"></script>
<script>
// increase the default animation speed to exaggerate the effect
var $j = jQuery.noConflict();
var old_width='';
$j(function() {
//配置dialog弹出框
$j( "#uploader" ).dialog({
autoOpen: false,
dialogClass: "my-dialog",
// show: "blind",
// hide: "explode",
width: 750,
minWidth: 400,
position: [420,185], // 弹出时，出现的地方
draggable:true
});
//打开dialog
$j( ".up_photo" ).click(function() {
$j( "#uploader" ).dialog( "open" );
return false;
});
$j( ".cl_photo" ).click(function() {
$j( "#uploader" ).dialog( "close" );
return false;
});
$j( "#next" ).click(function() {
$j.ajaxFileUpload ({
url:'../../Home/photoupload', //文件上传的到这来
secureuri:false,
fileElementId:'pic', //要和input file那个id名字相同
dataType: 'json',
success: function (data, status) {
if(data){
if(data==10101){
alert("您已经上传5张照片了");
window.top.location.reload();
}else{
$j('#up_content').css('display','none');
$j('#ima').css('display','');
$j('.tailor').attr('src',data);
$j('#uploader_step').text("2");
$j('#ima_hidden').attr("value",data);
tail_photo();
$j.post('../../Home/ima_hei',{url_image:data},function (data){
var old_width=data;
$j("#old_width0").attr("value",old_width);
});
}
}
},
error: function (data, status, e){
alert(e);
}
})
});
})
</script>
<body>
<ul class="profile_links">
<li class="upload_photo" id="leftbar_upload_photo"><a href="#" class="up_photo"><img src="__TEST__/_img/bg/小2.png" width="29" height="22"> 上传一张头像</a></li>
</ul>
<div id="uploader" class="shadowbox">
<div class="container">
<a class="cl_photo" href="#" id="cl_photo">x</a>
<h3 class="title">上传照片: 步骤 <span id="uploader_step">1</span> 共 3</h3>
<div id="uploader_loader" style="display: none;"><div class="beaker"></div></div>
<div id="up_content" >
<input id="pic" type="file" name="pic" accept="image/jpeg, image/png, image/jpg, image/gif" />
<p id="uploader_next" class="btn small refer " style="margin-top:10px;"><a href="#" id="next"></a></p>
<p id="uploader_startover_button" class="btn small cancel " style="margin-left:135px; margin-top:-30px; margin-bottom:10px" ><a href="#" id="" class="cl_photo" style="" target="" tabindex=""></a></p>
</div>
<div id="ima" style="display:none">
<div style="width:395px;"> <img id='tailor' class="tailor" src="/public/image/20120904/nishishui/1346756269.jpg" style="width:410px"></div>
<form id="form2" action="__APP__/Home/up_photo" method="post">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" id="ima_hidden" name="ima_hidden" value="" />
<p id="uploader_finished" class="btn small refer " style=" margin-top:10px;"><a href="#" id="" class="" style="" target="" tabindex="" onclick="sub_upload1();return false;"></a></p>
<p id="uploader_startover_button" class="btn small cancel " style="margin-left:135px; margin-top:-30px; margin-bottom:10px" ><a href="#" id="" class="cl_photo" style="" target="" tabindex=""></a></p>
</form>
</div>
<div id="aa0" style="display:none">
<div id="up_content" >
<span>您已成功上传图片</span>
<br />
<p class="btn small checkphoto " id="look_photo" style="float:left; margin-right:-25px"><a href="javascript:void(0)" id="" class="" style="" target="" tabindex=""></a></p>
<p id="quit_photo" class="btn small finishi " style="float:left; margin-right:-25px" ><a href="#" id="" class="" style="" target="" tabindex=""></a></p>
<p id="title_photo" class="btn small mainphoto " ><a href="#" id="" class="" style="" target="" tabindex=""></a></p>
</div>
</div>
<div id="aa1" style="display:none">设置头像成功
<br />
<p id="quit_photo" class="btn small cancel " ><a href="#" id="" class="" style="" target="" tabindex="">取消</a></p>
</div>
<div id="aa2" style="display:none">设置头像失败
<br />
<p id="quit_photo" class="btn small cancel " ><a href="#" id="" class="" style="" target="" tabindex="">取消</a></p>
</div>
<div id="uploader_sr_text" class="sr_message " >
<p>
<em>照片里必须有你本人</em> 如果你放裸照，局部照，宠物，车，风景，艺术作品等，你的照片或账户将被删除
<span class="signature">— 适友提示</span>
</p>
</div>
</div></div>
</body>
</html>
//下面的是php代码
public function photoupload(){
session_start();
$user = M('User_photo');
$con0 = $user->query("select COUNT(id) as CON from cup_user_photos where
user_id='".session('user_id')."'");
if($con0[0]['CON']>=5){
echo "10101";
}else{
import("ORG.Net.UploadFile");
$upload = new UploadFile();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->saveRule = time();
$upload->thumb = true;
$upload->thumbMaxWidth = "1024";
$upload->thumbMaxHeight = "768";
$upload->thumbRemoveOrigin = true;
$upload->allowExts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload_file="public/image/".date('Ymd')."/".session('username')."/";
$upload_dir=create_folders($upload_file);
$upload->savePath = $upload_dir;// 设置附件上传目录
//给图片加水印
import('ORG.Util.Image');
$Image = new Image();
$uploadfile='/'.$info[0]['savepath'].'thumb_'.$info[0]['savename'];
$Image->water($uploadfile,'/public/image/1336954430057.png');
if(!$upload->upload()) {// 上传错误提示错误信息
$this->error($upload->getErrorMsg());
}else{// 上传成功 获取上传文件信息
$info =$upload->getUploadFileInfo();
//给m_缩略图添加水印, Image::water('原文件名','水印图片地址')
//给图片加水印
$uploadfile='/'.$info[0]['savepath'].'thumb_'.$info[0]['savename'];
echo $uploadfile;
}
}
}
//如果想要上传后并有剪切功能请看下个帖子
