javascript - Onclick 图像打开/弹出文件字段

Question

我的表单中有一个文件字段。那个领域看起来很奇怪。所以我想让它成为一个图像。所以我点击图像并打开一个文件字段（选择一个文件）。

给我最好的解决方案。对于所有浏览器支持。

Answer 1

这应该这样做：

HTML 代码

<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>

CSS 样式

label.filebutton {
    width:120px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-color:#ccc;
}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}

Answer 2

使字段透明并将其放置在具有溢出的 div 中：隐藏并将您的图像作为背景：

<div style="width:16px;height:16px;overflow:hidden">
  <input type="file" name="file" style="opacity:0;filter:alpha(opacity=0)">
</div>

如果图像大于字段的默认大小，您还必须编写 JS 来根据光标位置移动字段，因此请尽量避免这种情况。