使用JS设置文件下传输入框为只读属性
日期：2014-05-16 浏览次数：20516 次
使用JS设置文件上传输入框为只读属性
希望给点评论什么的，也便于本人重新编辑该文章，别拍拍屁股走人啊！哈哈！如何将文件上传输入框设置为只读属性，这或许在许多程序员面前都曾有过这样的需求，但是怎么更好的解决呢？
这里我将介绍一种简单而有效的方法。大家都知道，在struts应用中<input/>标签中使用readonly属性设置该文本输入框为只读，但是在将文件上传输入框设置为只读属性这个问题上具体怎么做呢 ？
现在我就将自己的思路与大家一起分享，做法是通过javascript实现的，具体的思路如下：
1.采用css把file的输入框隐藏掉，代码如下：
2.新增加一个text的输入框，把其属性设置为readonly，代码如下：
3.通过JS把从选择文件得到的值传递给text文本框，代码如下：
完整代码如下所述：
希望给点评论什么的，也便于本人重新编辑该文章，别拍拍屁股走人啊！哈哈！如何将文件上传输入框设置为只读属性，这或许在许多程序员面前都曾有过这样的需求，但是怎么更好的解决呢？
这里我将介绍一种简单而有效的方法。大家都知道，在struts应用中<input/>标签中使用readonly属性设置该文本输入框为只读，但是在将文件上传输入框设置为只读属性这个问题上具体怎么做呢 ？
现在我就将自己的思路与大家一起分享，做法是通过javascript实现的，具体的思路如下：
1.采用css把file的输入框隐藏掉，代码如下：
<style type="text/css">
.file {
width: 0px;
border: #FFFFFF;
}
</style>2.新增加一个text的输入框，把其属性设置为readonly，代码如下：
<input type="text" name="fileName" readonly="">
3.通过JS把从选择文件得到的值传递给text文本框，代码如下：
<script language="javascript">
function getFileName(){
newsForm.fileName.value=newsForm.file.value
}
</script>完整代码如下所述：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>新闻图片上传页面</title>
<style type="text/css">
.file {
width: 0px;
border: #FFFFFF;
}
</style>
<script language="javascript">
function getFileName(){
newsForm.fileName.value=newsForm.file.value
}
</script>
</head>
<body>
<form name="newsForm" method="post" action="#">
<input type="text" name="fileName" readonly="">
<input name="file" type="file" class="file" onChange="return getFileName()">
</form>
</body>
</html>
1 楼
daoyongyu
2008-09-17
谢谢，上个礼拜正做了一个项目是文件上传，就需要用到你这个咚咚！
2 楼
wanglihu
2008-09-17
有啥不清楚的，可以一起交流！
3 楼
liqiuxi
2009-05-07
思路不错。
4 楼
helloqidi
2009-08-04
恩，谢谢了
偶试过直接用readonly属性或用display隐藏等都不行
偶试过直接用readonly属性或用display隐藏等都不行
5 楼
helloqidi
2009-08-04
在网上找了一下，加上如下属性即可
onkeydown="event.returnValue=false;" onpaste="return false"
onkeydown="event.returnValue=false;" onpaste="return false"
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
