博客介绍了一种美化文件输入框的方法。通过使用看不见的file对象，用text框显示文件路径，用button控制file的点击事件，结合JavaScript实现功能，并可通过修改text框和button的样式来美化file输入框。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!--和XHTML兼容-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<input type="text" name="file1" value="" id="file1" onkeydown="return false;" oncontextmenu="return false;" ondragenter="return false;" onpaste="return false;">
<input type="file" name="file2" id="file2" style="display:none" onchange='document.getElementById("file1").value=this.value'>
<input type="button" value="浏览..." onclick='document.getElementById("file2").click()'>
</body>
<script language="javascript">
function showMessage(){
alert('message');
return false;
}
</script>
</html>
本质的意思就是说使用一个看不见的file对象，用text框来显示他们的路径，用button来控制file的点击事件，通过修改text框和button的样式来美化file
<html xmlns="http://www.w3.org/1999/xhtml"><!--和XHTML兼容-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<input type="text" name="file1" value="" id="file1" onkeydown="return false;" oncontextmenu="return false;" ondragenter="return false;" onpaste="return false;">
<input type="file" name="file2" id="file2" style="display:none" onchange='document.getElementById("file1").value=this.value'>
<input type="button" value="浏览..." onclick='document.getElementById("file2").click()'>
</body>
<script language="javascript">
function showMessage(){
alert('message');
return false;
}
</script>
</html>
本质的意思就是说使用一个看不见的file对象，用text框来显示他们的路径，用button来控制file的点击事件，通过修改text框和button的样式来美化file
扫一扫
到【灌水乐园】发言
