Html 无法为输入文件指定上/左位置

我正在创建一个div，您可以从桌面上删除文件，也可以通过单击它上传文件。由于安全限制（我无法触发文件输入的点击），我正在做的是在目标div上跟随鼠标移动不透明0文件输入的技巧。它在Chrome上非常有效，但Firefox没有做到这一点（因为它将文件输入粘贴到div的左上角。我将向您展示我使用的结构：

<div style="position:relative;width:500px">
    <img class="img-drop" width="500" src="http://placehold.it/500x500">
    <div class="over-img-drop" style="position:absolute;width:100%;height:100%;top:0;">
        Drop or click to upload a picture.
        <input type="file" style="position:absolute;width:20px;height:20px;opacity:0" class="fileupload">
    </div>
    <a href="#" class="btn-statusbar" style="position:absolute;top:10px;right:10px"><i class="icon-chevron-down"></i></a>
</div>

拖放或单击以上载图片。

下面是Javascript

<script type="text/javascript">
    $(".over-img-drop").on("mouseover,  mousemove", function(e){
        if($(e.target).hasClass("fileupload")) //if event is happening over file input, avoid moving
            return true;
        $(this).find(".fileupload").css("top", e.offsetY-10).css("left", e.offsetX-10);
            return false;
    });
</script>

$（“.over img drop”）.on（“mouseover，mousemove”，函数（e）{
if（$（e.target）.hasClass（“fileupload”）//如果事件发生在文件输入上，请避免移动
返回true；
$（this.find（“.fileupload”）.css（“top”，e.offsetY-10）.css（“left”，e.offsetX-10）；
返回false；
});

我碰巧找到了一个解决方案：

event.offsetX

和

event.offsetY

在Chrome上可用，但在Firefox上不可用（这些值返回

undefined

）。您需要做的是手动计算偏移量，并根据此计算放置任何位置：如前所述，jQuery包括此项

您应该做的是获取容器的偏移量，并从

event.pageX

和

event.pageY

中减去它。因此，代码如下所示：

<script type="text/javascript">
    $(".over-img-drop").on("mouseover,  mousemove", function(e){
        if($(e.target).hasClass("fileupload"))
            return true;
        var offsets = $(this).offset();
        $(this).find(".fileupload").css("top", e.pageY-offsets.top-10).css("left", e.pageX-offsets.left-10);
        return false;
    });
</script>

$（“.over img drop”）.on（“mouseover，mousemove”，函数（e）{
if（$（e.target）.hasClass（“文件上载”））
返回true；
var offset=$（this.offset（）；
$（this）.find（“.fileupload”）.css（“top”，e.pageY-offsets.top-10）.css（“left”，e.pageX-offsets.left-10）；
返回false；
});