asp.net - 如何用 FileUpload 控件的图像替换浏览器按钮？

Question

我的页面中有一个 FileUpload 控件，如下所示。默认情况下，它有一个浏览...按钮。我想用具有自定义图像的 ImageButton 替换它。谁能告诉我如何实现这一目标？

<td width="40%" valign="top" align="center">
                <asp:FileUpload ID="FileUpload1" runat="server" />
</td>

Answer 1

经过一番查找，终于找到了this answer 。由于我只需要用我的图像替换默认的“选择文件”按钮，因此我删除了大部分样式并更改了标记以满足我的需要。

我最终得到:

.file-upload {
  cursor: pointer;      
}

.file-upload input {
  top: 0;
  left: 0;
  margin: 0;
  /* Loses tab index in webkit if width is set to 0 */
  opacity: 0;
  filter: alpha(opacity=0);
}

<label class="file-upload">
  <img src="../myimage.png" />
  <asp:FileUpload ID="myfile" runat="server" />
</label>

我希望这可以帮助其他人寻找类似的解决方案。