itsbloodisblack
12-27-2011, 09:35 PM
Hey guys, I'm working on a user website and have got the upload form working and the cropping working, also got the image in my profile, all works great.
A few things I need tho and wondering if you could help.
I need to stop the form from resubmitting the image when I refresh the upload.php page below
upload.php
<?php
define('INCLUDE_CHECK',true);
require 'connect.php';
session_start();
$session_id ='1';
$username = $_SESSION['user'];
$upload = $_POST['upload'];
$new_name = "small".$username.".jpg";
$path = "uploads/";
?>
<html>
<head>
<title>My Network</title>
</head>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
function getSizes(im,obj)
{
var x_axis = obj.x1;
var x2_axis = obj.x2;
var y_axis = obj.y1;
var y2_axis = obj.y2;
var thumb_width = obj.width;
var thumb_height = obj.height;
if(thumb_width > 0)
{
if(confirm("Do you want to save image..!"))
{
$.ajax({
type:"GET",
url:"ajax_image.php?t=ajax&img="+$("#image_name").val()+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis,
cache:false,
success:function(rsponse)
{
$("#cropimage").hide();
$("#thumbs").html("");
$("#thumbs").html("<img src='uploads/"+rsponse+"' />");
}
});
}
}
else
alert("Please select portion..!");
}
$(document).ready(function () {
$('img#photo').imgAreaSelect({
aspectRatio: '1:1',
onSelectEnd: getSizes
});
});
</script>
<?php
$valid_formats = array("jpg", "png", "gif", "bmp");
if(isset($_POST['submit']))
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name))
{
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats) && $size<(1024*1024))
{
$actual_image_name = time().substr($txt, 5).".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
mysql_query("UPDATE user SET profile_image='$actual_image_name' WHERE id='$username'");
$image="<h1>Please drag on the image</h1><img src='uploads/".$actual_image_name."' id=\"photo\" style='max-width:500px' >";
$profile_image="<img src='uploads/".$new_name."' style='max-width:500px' >";
}
else
echo "failed";
}
else
echo "Invalid file formats..!";
}
else
echo "Please select image..!";
}
?>
<body>
<div style="margin:0 auto; width:600px">
<?php echo $image; ?>
<div style="padding:5px; width:600px">
<?php echo $profile_image; ?>
</div>
<div style="width:600px">
<form id="cropimage" method="post" enctype="multipart/form-data">
Upload your image <input type="file" name="photoimg" id="photoimg" />
<input type="hidden" name="image_name" id="image_name" value="<?php echo($actual_image_name)?>" />
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</div>
</body>
</html>
ajax_image.php
<?php
define('INCLUDE_CHECK',true);
require 'connect.php';
session_start();
$username = $_SESSION['user'];
$upload = $_POST['upload'];
$t_width = 100; // Maximum thumbnail width
$t_height = 100; // Maximum thumbnail height
$new_name = "small".$username.".jpg"; // Thumbnail image name
$path = "uploads/";
if(isset($_GET['t']) and $_GET['t'] == "ajax")
{
extract($_GET);
$ratio = ($t_width/$w);
$nw = ceil($w * $ratio);
$nh = ceil($h * $ratio);
$nimg = imagecreatetruecolor($nw,$nh);
$im_src = imagecreatefromjpeg($path.$img);
imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w,$h);
imagejpeg($nimg,$path.$new_name,90);
mysql_query("UPDATE user SET profile_image_small='$new_name' WHERE username='$username'");
echo $new_name."?".time();
exit;
}
?>
And I also need a live preview of cropping. So when the user is selecting what area of the Large image they want as there final thumb image, they can see the thumb change to that selection at the same time.
The thumb is below the uploaded image, and without refreshing, which I cannot yet do because of the form resubmit, you can't see the final image until you go back to your profile.
If I didn't make the above clear enough, please tell me.
Thanks for any help and suggestions. :thumbsup:
A few things I need tho and wondering if you could help.
I need to stop the form from resubmitting the image when I refresh the upload.php page below
upload.php
<?php
define('INCLUDE_CHECK',true);
require 'connect.php';
session_start();
$session_id ='1';
$username = $_SESSION['user'];
$upload = $_POST['upload'];
$new_name = "small".$username.".jpg";
$path = "uploads/";
?>
<html>
<head>
<title>My Network</title>
</head>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
function getSizes(im,obj)
{
var x_axis = obj.x1;
var x2_axis = obj.x2;
var y_axis = obj.y1;
var y2_axis = obj.y2;
var thumb_width = obj.width;
var thumb_height = obj.height;
if(thumb_width > 0)
{
if(confirm("Do you want to save image..!"))
{
$.ajax({
type:"GET",
url:"ajax_image.php?t=ajax&img="+$("#image_name").val()+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis,
cache:false,
success:function(rsponse)
{
$("#cropimage").hide();
$("#thumbs").html("");
$("#thumbs").html("<img src='uploads/"+rsponse+"' />");
}
});
}
}
else
alert("Please select portion..!");
}
$(document).ready(function () {
$('img#photo').imgAreaSelect({
aspectRatio: '1:1',
onSelectEnd: getSizes
});
});
</script>
<?php
$valid_formats = array("jpg", "png", "gif", "bmp");
if(isset($_POST['submit']))
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name))
{
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats) && $size<(1024*1024))
{
$actual_image_name = time().substr($txt, 5).".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
mysql_query("UPDATE user SET profile_image='$actual_image_name' WHERE id='$username'");
$image="<h1>Please drag on the image</h1><img src='uploads/".$actual_image_name."' id=\"photo\" style='max-width:500px' >";
$profile_image="<img src='uploads/".$new_name."' style='max-width:500px' >";
}
else
echo "failed";
}
else
echo "Invalid file formats..!";
}
else
echo "Please select image..!";
}
?>
<body>
<div style="margin:0 auto; width:600px">
<?php echo $image; ?>
<div style="padding:5px; width:600px">
<?php echo $profile_image; ?>
</div>
<div style="width:600px">
<form id="cropimage" method="post" enctype="multipart/form-data">
Upload your image <input type="file" name="photoimg" id="photoimg" />
<input type="hidden" name="image_name" id="image_name" value="<?php echo($actual_image_name)?>" />
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</div>
</body>
</html>
ajax_image.php
<?php
define('INCLUDE_CHECK',true);
require 'connect.php';
session_start();
$username = $_SESSION['user'];
$upload = $_POST['upload'];
$t_width = 100; // Maximum thumbnail width
$t_height = 100; // Maximum thumbnail height
$new_name = "small".$username.".jpg"; // Thumbnail image name
$path = "uploads/";
if(isset($_GET['t']) and $_GET['t'] == "ajax")
{
extract($_GET);
$ratio = ($t_width/$w);
$nw = ceil($w * $ratio);
$nh = ceil($h * $ratio);
$nimg = imagecreatetruecolor($nw,$nh);
$im_src = imagecreatefromjpeg($path.$img);
imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w,$h);
imagejpeg($nimg,$path.$new_name,90);
mysql_query("UPDATE user SET profile_image_small='$new_name' WHERE username='$username'");
echo $new_name."?".time();
exit;
}
?>
And I also need a live preview of cropping. So when the user is selecting what area of the Large image they want as there final thumb image, they can see the thumb change to that selection at the same time.
The thumb is below the uploaded image, and without refreshing, which I cannot yet do because of the form resubmit, you can't see the final image until you go back to your profile.
If I didn't make the above clear enough, please tell me.
Thanks for any help and suggestions. :thumbsup: