使用JS设置文件上传输入框为只读属性-优快云博客

本文介绍了一种在Struts应用中将文件上传输入框设置为只读的方法。通过CSS隐藏文件选择框，并使用JavaScript将文件名显示在一个只读文本框中，实现了既能看到文件名又不能更改的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[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>