javascript - 如何通过单击文本显示文件浏览器并在悬停文本时将鼠标光标更改为指针

Question

我试图在用户单击我页面上的链接时显示文件选择器。我环顾四周，但仍未找到完整的解决方案。

我已经排除了将监听器绑定(bind)到链接上的点击事件并模拟表单文件字段上的点击事件的可能性，因为我了解到 Safari 不支持以编程方式点击输入 [type=file]。

目前我正在使用将文件字段的不透明度设置为 0 并将其绝对定位在链接顶部的方法，从而有效地拦截对链接的任何点击。这样做的问题是，当用户将光标悬停在链接上时，我想不出一种方法来更改用户的光标，因为它被文件输入遮住了，这不允许这样的样式。我已经为所有直接父元素提供了 css 样式的 cursor: pointer，但仍然没有成功。

有没有人知道我可以采取不同的方法来让光标在我的链接悬停时变为指针？我最好的选择是使用他们在 http://www.uploadify.com/ 拥有的东西吗？ ？

编辑

为了更好地解释，我在我的页面上输入了这个文件:

<div class="logo_file">
    <input id="logo_file_field" type="file">
</div>

使用这个 CSS:

.logo_file {
    position: absolute;  /* this element's parent has position: relative */
    top: -65px;
    left: 0;
    width: 175px;
    overflow: hidden;
    cursor: pointer;
}
input#logo_file_field {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
}

当用户单击此链接时，我试图显示与该字段对应的文件选择器:

<div class="logo_link_wrap">
    <a id="logo_change_link">Change Photo</a>
</div>

其中有这个 css:

.logo_link_wrap {
    margin-top: 38px;
    cursor: pointer;
}

现在我将不可见的文件字段放在链接上，但是当您将鼠标悬停在链接上时，光标并没有像它应该的那样变成指针。文件选择器确实显示了，实际上只是光标没有改变让我停滞不前。谢谢

Answer 1

问题是您将输入字段放在链接上并使用 opacity:0; 使输入字段不可见。但是输入字段仍然存在，并且阻止了光标对链接的访问。将不透明度替换为 display:none 不是更好吗？

使用 display:none 可以隐藏输入字段并将其从流程中移除。我假设您希望使用该链接来激活输入字段的上传功能，并且我还假设您知道如何执行此操作。