<?php
header("Content-Type: text/html; charset=utf-8");
@header( "Cache-Control: no-cache, must-revalidate" );
@header( "Pragma: no-cache" );
@header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
if($_GET['act']=='saveThumb'){
$targ_w=65;
$targ_h=65;
$jpeg_quality = 100;
$src = $_POST['bigImage'];
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
$whites = imagecolorallocate($dst_r,255,255,255); //背景白色
imagefill($dst_r,0,0,$whites);
imagecopyresampled($dst_r,$img_r, $_POST['dst_x'],$_POST['dst_y'],$_POST['img_x'],$_POST['img_y'], $_POST['dst_w'],$_POST['dst_h'],$_POST['img_w'],$_POST['img_h']);
header('Content-type: image/jpeg');
imagejpeg($dst_r,null,$jpeg_quality);
//imagejpeg($dst_r,$src,$jpeg_quality); //用裁切后的图片替换掉大图
imagedestroy($img_r);
imagedestroy($dst_r);
exit;
}
if($_GET['act']=='upload'){
if($_POST['upload']=='upload'){
$updir ='upload/';
$uploadfile = $uploaddir . basename($_FILES['file']['name']);
$_FILES['file']['name']=strtolower($_FILES['file']['name']);
$tmp_filename=explode(".",$_FILES['file']['name']);
if($tmp_filename[(count($tmp_filename)-1)]=='jpg' || $tmp_filename[(count($tmp_filename)-1)]=='jpeg'){
$up_filename=$updir.md5($_FILES['file']['name'].$_FILES['file']['size']).".".$tmp_filename[(count($tmp_filename)-1)] ;
if(move_uploaded_file($_FILES['file']['tmp_name'],$up_filename)){
list($width, $height, $type, $attr) = getimagesize($up_filename);
$f1="<img src='$up_filename' id='ImageDrag'>";
$f2="<img src='$up_filename' id='ImageIcon'>";
echo '<script language="javascript">parent.$("#ImageDragContainer").html("'.$f1.'");parent.$("#IconContainer").html("'.$f2.'");parent.$("#bigImage").val("'.$up_filename.'");parent.run('.$width.','.$height.');</script>';
echo "<script>location.href='?act=upload'</script>";exit;
}else{
echo "<script>alert('图片上传失败!');location.href='?act=upload'</script>";exit;
}
}else{
echo "<script>alert('图片上传失败,请注意上传格式，目前只支持jpg格式图片!');location.href='?act=upload'</script>";exit;
}
}
?>
<body style="padding:0px;margin:0px;">
<div style="margin:0px;padding:0px;font-size:12px;">
<FORM ACTION="?act=upload" METHOD="POST" enctype="multipart/form-data">
<input type="file" name="file" id="file" />
<input type="submit" name="button" id="button" value="上传" />
<input name="upload" type="hidden" id="upload" value="upload" /><input type="hidden" name="MAX_FILE_SIZE" value="3000000" />
</FORM>
</div>
</body>
<?php
exit;
}
?>
<!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>
<style>
#Canvas{position: relative;border:2px solid #888888;overflow:hidden;cursor:pointer;}
#bar{
width: 211px;
height: 18px;
background-image: url("/images/track.gif");
background-repeat: no-repeat;
position: relative;
}
.child{width: 11px;height: 16px;background-image: url(/images/grip.gif);background-repeat: no-repeat;left: 0;top:3px;position: absolute;left:100px;}
#IconContainer{position:relative;left:0px;}
#IconContainer img{FILTER:alpha(opacity=40);opacity:0.6;background-color:#fff;}
#ImageDragContainer {border: 1px solid #ccc;cursor: pointer;position: relative;overflow: hidden;z-index:1;}
</style>
<script src="js/jquery.pack.js"></script>
<script type="text/javascript" src="js/ui.core.packed.js" ></script>
<script type="text/javascript" src="js/ui.draggable.packed.js" ></script>
<script type="text/javascript">
var CANVAS_WIDTH = 250; //画布的宽
var CANVAS_HEIGHT = 250; //画布的高
var ICON_WIDTH = 65; //截取框的宽
var ICON_HEIGHT = 65; //截取框的高
var LEFT_EDGE = (CANVAS_WIDTH - ICON_WIDTH) / 2;
var TOP_EDGE = (CANVAS_HEIGHT - ICON_HEIGHT) / 2;
var scaleFactor;
var factor;
var minFactor;
var oldWidth;
var oldHeight;
$(window).load(function() {
run(0,0);
$(".child").draggable({
cursor: "move", containment: $("#bar"),
drag: function(e, ui) {
var left = parseInt($(this).css("left"));
//前面讲过了y=factor（x），此处是知道x求y的值，即知道滑动条的位置，获取缩放率
scaleFactor = Math.pow(factor, (left / 100 - 1));
if (scaleFactor < minFactor) {
scaleFactor = minFactor;
}
if (scaleFactor > factor) {
scaleFactor = factor;
}
//以下代码同初始化过程，因为用到局部变量所以没有
var iconElement = $("#ImageIcon");
var imagedrag = $("#ImageDrag");
var image = new Image();
image.src = iconElement.attr("src");
var realWidth = image.width;
var realHeight = image.height;
image = null;
//图片实际尺寸
var currentWidth = Math.round(scaleFactor * realWidth);
var currentHeight = Math.round(scaleFactor * realHeight);
//图片相对CANVAS的初始位置
var originLeft = parseInt(iconElement.css("left"));
var originTop = parseInt(iconElement.css("top"));
originLeft -= Math.round((currentWidth - oldWidth) / 2);
originTop -= Math.round((currentHeight - oldHeight) / 2);
dragleft = originLeft - LEFT_EDGE;
dragtop = originTop - TOP_EDGE;
//图片当前尺寸和位置
iconElement.css({ width: currentWidth + "px", height: currentHeight + "px", left: originLeft + "px", top: originTop + "px" });
imagedrag.css({ width: currentWidth + "px", height: currentHeight + "px", left: dragleft + "px", top: dragtop + "px" });
valuewrite(originLeft,originTop,currentWidth,currentHeight);
valuewrite(dragleft,dragtop,currentWidth,currentHeight);
oldWidth = currentWidth;
oldHeight = currentHeight;
}
});
var SilderSetValue = function(i) {
var left = parseInt($(".child").css("left"));
left += i;
if (left < 0) {
left = 0;
}
if (left > 200) {
left = 200;
}
scaleFactor = Math.pow(factor, (left / 100 - 1));
if (scaleFactor < minFactor) {
scaleFactor = minFactor;
}
if (scaleFactor > factor) {
scaleFactor = factor;
}
var iconElement = $("#ImageIcon");
var imagedrag = $("#ImageDrag");
var image = new Image();
image.src = iconElement.attr("src");
var realWidth = image.width;
var realHeight = image.height;
image = null;
//图片实际尺寸
var currentWidth = Math.round(scaleFactor * realWidth);
var currentHeight = Math.round(scaleFactor * realHeight);
//图片相对CANVAS的初始位置
var originLeft = parseInt(iconElement.css("left"));
var originTop = parseInt(iconElement.css("top"));
originLeft -= Math.round((currentWidth - oldWidth) / 2);
originTop -= Math.round((currentHeight - oldHeight) / 2);
dragleft = originLeft - LEFT_EDGE;
dragtop = originTop - TOP_EDGE;
//图片当前尺寸和位置
$(".child").css("left", left + "px");
iconElement.css({ width: currentWidth + "px", height: currentHeight + "px", left: originLeft + "px", top: originTop + "px" });
imagedrag.css({ width: currentWidth + "px", height: currentHeight + "px", left: dragleft + "px", top: dragtop + "px" });
valuewrite(originLeft,originTop,currentWidth,currentHeight);
valuewrite(dragleft,dragtop,currentWidth,currentHeight);
oldWidth =
php jquery+及jquery+ui插件轻松打造仿开心网无刷新头像上传功能
5星 · 超过95%的资源 需积分: 9 109 浏览量
2011-12-21
17:31:33
上传
评论 1
收藏 43KB ZIP 举报 
jquery+及jquery+ui插件轻松打造仿开心网无刷新头像上传功能.zip （14个子文件） 
jquery+及jquery+ui插件轻松打造仿开心网无刷新头像上传功能 
thumb.php 18KB js ui.core.packed.js 4KB jquery.pack.js 30KB ui.draggable.packed.js 10KB image 
track.gif 571B h.gif 258B grip.gif 587B bg_120.gif 794B _h.gif 255B man.GIF 2KB c.gif 258B
t.jpg 6KB _c.gif 255B blank.jpg 7KB upload 
- 1
- 2
- 3
前往页