如何使文件上传输入框为只读属性
2009-02-06 13:02
267 查看
来源:http://hi.baidu.com/kekemao1/blog/item/4a5dd6459d6c473e86947320.html
我们知道,在网页上显示文件上传控件的语句是<input type="file"> 。在此当中,并不能对显示的输入框进行任何的设置,如果添加参数“readOnly”,则就连“浏览”按钮也不能用了。因此,狂人觉得,必须绕个弯才能解决问题。
于是狂人想到了javascript,经过一番调试,终于实现了上述功能。主要思路是:采用CSS把FILE的输入框隐藏掉,新增加一个TEXT的输入框,把其属性设置为readonly,通过JS把从选择文件得到的值传递给text文本框。下面是完整代码,只要把整段代码复制粘贴后运行就可以看到效果。
[CODE][b]:[/b]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>只读文件上传输入框例子</title>
<!--设置宽度为0,边框为白色(与页面背景色相同)的CSS样式-->
<style type="text/css">
<!--
.fileinput {
width: 0px;
border: #FFFFFF;
}
-->
</style>
<script>
function getvalue()
{
form1.textfield.value=form1.file.value
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<input type="text" name="textfield" readonly=""><!--独立的输入框,其值通过读取控件file的值取得-->
<input name="file" type="file" class="fileinput" onChange="return getvalue()"><!--使用css,隐藏控件本身的输入框-->
</form>
</body>
</html>
我们知道,在网页上显示文件上传控件的语句是<input type="file"> 。在此当中,并不能对显示的输入框进行任何的设置,如果添加参数“readOnly”,则就连“浏览”按钮也不能用了。因此,狂人觉得,必须绕个弯才能解决问题。
于是狂人想到了javascript,经过一番调试,终于实现了上述功能。主要思路是:采用CSS把FILE的输入框隐藏掉,新增加一个TEXT的输入框,把其属性设置为readonly,通过JS把从选择文件得到的值传递给text文本框。下面是完整代码,只要把整段代码复制粘贴后运行就可以看到效果。
[CODE][b]:[/b]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>只读文件上传输入框例子</title>
<!--设置宽度为0,边框为白色(与页面背景色相同)的CSS样式-->
<style type="text/css">
<!--
.fileinput {
width: 0px;
border: #FFFFFF;
}
-->
</style>
<script>
function getvalue()
{
form1.textfield.value=form1.file.value
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<input type="text" name="textfield" readonly=""><!--独立的输入框,其值通过读取控件file的值取得-->
<input name="file" type="file" class="fileinput" onChange="return getvalue()"><!--使用css,隐藏控件本身的输入框-->
</form>
</body>
</html>
相关文章推荐
- golang/windows如何删除只读属性文件
- 文件上传下载时,在form表单中设置属性enctype=“multipart/form-data”的情况下,如何获取表单提交的值?
- C# 如何重命名(无视是否只读、等文件侠属性)文件侠,与操作
- 在VC中,如何修改文件的只读属性设置
- 在VC中,如何修改文件的只读属性设置
- 设置上传文件控件文本框只读属性代码
- 在VC中,如何修改文件的只读属性设置(转)
- 【转载】FileUpload控件如何实现上传和文件属性获取
- 在VC中,如何修改文件的只读属性设置(转)
- struts2上传文件的File属性如何装载
- svn 如何往svn上传原本被忽略的*.a文件
- linux下如何使用sftp命令进行文件上传和下载
- 怎么解决上传文件时winSCP报错误码3(如何用root帐号登录winscp)
- 用JS如何判断文件上传的大小
- 如何在命令行中使用 ftp 命令上传和下载文件
- HTML控件ID和NAME属性的区别,以及如何在asp.net页面的.CS文件中获得.ASPX页面中HTML控件的值
- iPhone SDK开发: 如何上传图片文件到服务器
- 安卓开发调用第三方应用(如WPS)打开文档(比如Word),如何设置文件只读,不能被修改?
- 远程登入虚拟机如何上传文件
- C++如何获取文件属性