日期:2014-05-17  浏览次数:20423 次

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);