我是靠谱客的博主 靓丽橘子,最近开发中收集的这篇文章主要介绍使用JS设置文件上传输入框为只读属性,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

[color=red]希望给点评论什么的,也便于本人重新编辑该文章,别拍拍屁股走人啊!哈哈![/color]如何将文件上传输入框设置为只读属性,这或许在许多程序员面前都曾有过这样的需求,但是怎么更好的解决呢?
这里我将介绍一种简单而有效的方法。大家都知道,在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>

最后

以上就是靓丽橘子为你收集整理的使用JS设置文件上传输入框为只读属性的全部内容,希望文章能够帮你解决使用JS设置文件上传输入框为只读属性所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(52)

评论列表共有 0 条评论

立即
投稿
返回
顶部