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

【问题标题】：mouse location tracking on uploaded image using html and javascript使用 html 和 javascript 对上传的图像进行鼠标位置跟踪
【发布时间】：2015-09-17 21:02:56
【问题描述】：

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

    <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/*"/>

点击.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>

【问题讨论】：

标签： javascript php html image mouseover

【解决方案1】：

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

这一行：

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

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

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

你会得到一个错误，告诉你无法设置标题。

【讨论】：

所有错误都已启用，但仍然没有显示任何错误。