使用JS设置文件上传输入框为只读属性 博客分类: javaScript技术 StrutsJavaScriptCSS
程序员文章站
2024-03-23 15:24:28
...
希望给点评论什么的,也便于本人重新编辑该文章,别拍拍屁股走人啊!哈哈!如何将文件上传输入框设置为只读属性,这或许在许多程序员面前都曾有过这样的需求,但是怎么更好的解决呢?
这里我将介绍一种简单而有效的方法。大家都知道,在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>