...

View Full Version : Stop form resubmitting data on refresh and live cropping



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:

itsbloodisblack
12-27-2011, 09:45 PM
In the answer to my own 1st question of the resubmitting... Would I have to submit the image to the database, then redirect the user to a process page where they can update there thumbnail? Because then the form would be in a different page.
Or can I go for some type of Iframe method for the form? GET or what not?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum