Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stop form resubmitting data on refresh and live cropping

    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 Code:
    <?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($txt5).".".$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 Code:
    <?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.

  • #2
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •