2

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

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

2 回答 2

1

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

我最终得到： 

.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>

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

于 2016-04-30T01:43:08.883 回答
0

就像 Michael Leanos 的回答一样，但我做出了改变：

<style type="text/css">
    .file-upload 
    {
        cursor: pointer;      
    }

    .file-upload input 
    {
        /* the same icon width/heght */
        width:70px;
        height:70px;
        /* a z-index higher than the icon */
        z-index:999;
        /* less opcacity as possible */
        opacity: 0.01;        
        filter: alpha(opacity=0);
    }
</style>

/* 在图标上尽可能的不透明度和低 z-index */

<label class="file-upload">
    <asp:FileUpload ID="up_Allegato" runat="server" type="file" accept="image/*" _capture="camera" Style="position: absolute; right: 100px; top: 150px; height: 70px; line-height: 19px;" />
    <asp:ImageButton ID="bt_Photo" runat="server" Visible="true" ImageUrl="images/action_edit24 x 200.png" OnClientClick="return false;" Style="position: absolute; right: 100px; top: 150px; height: 70px; line-height: 19px;z-index:6 ;opacity:100"/>
 </label>
于 2021-10-01T13:20:39.707 回答