mouse location tracking on uploaded image using html and javascript

Question

I have written a code for tracking mouse location but my code is only working for the string but not for the image I am uploading. It is generating the image icon but not the image.

    <form action="click.php" method="post" enctype="multipart/form-data">
        <h3>Select image to upload:<br/></h3>
        <input type="file" name="fileToUpload" id="fileToUpload" accept="image/*"/>

click.php

        <script>
            function getPos(e) {
                x = e.clientX;
                y = e.clientY;
                cursor = "Your Mouse Position Is : " + x + " and " + y ;
                document.getElementById("displayArea").innerHTML=cursor
            }

            function stopTracking() {
                document.getElementById("displayArea").innerHTML="";
            }
        </script>
    </head>
    <body>
    <div id="focusArea" onmousemove="getPos(event)" onclick="merge" onmouseout="stopTracking()">
            <?php 
            $target_dir = "uploads/";
            $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
            $uploadOk = 1;
            $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
            // Check if image file is a actual image or fake image
            if (isset($_POST["submit"])) {
                $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
                if ($check !== false) {
                    move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);
                    $uploadOk = 1;
                } else {
                    $uploadOk = 0;
                }
             }
             header("Content-type: image/png");
             imagepng($target_file);
             imagedestroy($target_file);
         ?>
         </div>
         <p id="displayArea"></p>

Answer 1

Headers cannot be set after anything, they must be the first lines of any output.

This line:

header("Content-type: image/png");

Does not belong there. Enable errors as follows:

ini_set('display_errors', 1);
ini_set('error_reporting', E_ALL);

And you will get the error telling you that headers cannot be set.

mouse location tracking on uploaded image using html and javascript

Question

1 answers

solution1
0 2015-09-17 21:07:36

mouse location tracking on uploaded image using html and javascript

Question

1 answers

solution1 0 2015-09-17 21:07:36

solution1
0 2015-09-17 21:07:36