Question

我只想在上传的图片上写文字。我只使用HTML和PHP。同样，我试图保存鼠标光标的位置，用户点击图像来写他的文字。我在下面试过这些东西。它在我的click.php中显示错误。

的index.php

<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/*"/>
    <input type="submit" value="Upload Image" name="submit"/>
</form>

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>

    <div id="focusArea" onmousemove="getPos(event)" onmouseout="stopTracking()">
    <?php
        $target_dir = "uploads/";
        $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
          //Set the Content Type
        header("Content-type: image/png");
          #dispaly the image
        $file = $_POST['file'];
        echo file_get_contents($file);
    ?>
    </div>
    <p id="displayArea"></p>

Answer 1

请尝试此

$(document).ready(function(e) {
    $('#A').click(function(e) {
        alert(e.pageX+ ' , ' + e.pageY);
    });    
});

DEMO

如何在html和php中捕获上传图像上的鼠标光标位置？

1 个答案: