让File控件的按钮更漂亮（原）

最新推荐文章于 2023-01-04 18:39:57 发布

最新推荐文章于 2023-01-04 18:39:57 发布 · 136 阅读

文章标签：

#JavaScript #F# #HTML #ViewUI

Javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍两种方法来美化HTML中的文件上传按钮。一种方法是通过使用图片替代默认按钮，另一种则是更改按钮的文字显示和背景颜色。

方法1：

让按钮变成好看的图片

<table border="0" cellspacing="0" cellpadding="0" class="px12gray_none_6e">
 <tbody>
 <tr>
 <td><input type="text" name="f_file" class="input_gray" size="20" disabled><input name="elmFile" type="file" style="position:absolute;filter:alpha(opacity=0); width: 20px; cursor: pointer;" id="elmFile" onchange="this.form.f_file.value=this.value" hidefocus></td>
 <td width="70" align="center"><img src="newsub_124.gif" width="47" height="18" style="cursor: pointer;" alt="浏览"></td>
 <td valign="bottom">(最大可能上传200K)</td>
 </tr>
 </tbody>
</table>

方法2：

改变按钮文字和颜色

<html>
<head>
<title>File Upload Example</title>
<script language="JavaScript" type="text/javascript">
function HandleFileButtonClick()
{
document.frmUpload.myFile.click();
document.frmUpload.txtFakeText.value = document.frmUpload.myFile.value;
}
</script>
</head>
<body>
<form name="frmUpload">
<input type="file" name="myFile" style="display: none">
<input type="text" name="txtFakeText" readonly="true">
<input type="button" onclick="HandleFileButtonClick();" value="上传文件" style="background:red">
</form>
</body>
</html>