使用html和javascript对上传的图像进行鼠标位置跟踪

时间:2015-09-17 21:02:57

标签: javascript php html image mouseover

我已经编写了一个用于跟踪鼠标位置的代码,但我的代码仅适用于字符串,但不适用于我上传的图像。 它正在生成图像图标,但不生成图像。

    <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>

1 个答案:

答案 0 :(得分:0)

在任何内容之后都不能设置标题,它们必须是任何输出的第一行。

这一行:

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

不属于那里。启用错误如下:

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

您将收到错误消息,告知您无法设置标头。