input type=file 标签禁止让用户手动输入

简介:

常规的Web应用程序中涉及到文件上传的部分都不可避免地会使用到<input type="file"/>控件,在上传文件的时候通过点击“浏览”按钮,在弹出的文件选择对话框中选择本地要上传的文件。当然,如果你已经知道要上传的文件的本地路径,也可以复制路径到控件的输入框中(例如要选择的文件的路径特别长)。这就存在一个问题,如果你所复制的文件路径根本不存在,那么上传的时候就无法正确获取到文件,而且在javascript中没有判断该控件所选择的文件是否存在的方法,涉及到浏览器的安全性,大多数时候我们是不能通过javascript来操作客户端本地文件的。

      那么如何解决该问题呢?

      其实在FireFox和IE8中已经对这个控件进行了相应的限制,如果你在这两种浏览器中查看带有</input type="file">标签的页面,会看到根本不允许用户直接输入,而只能通过点击“浏览”按钮来选择文件,这样就可以有效地确保用户所选文件的合法性。但是在IE7和一些低版本的浏览器中仍然是可以输入的,这个时候就需要对这个控件进行一些限制,下面是可以采用的方法:

1. 替代法

      使用隐藏的<input type="file"/>控件,然后用一个只读的文本框和一个按钮来模拟<input type="file"/>的功能。

< input  type ="file"  name ="file"  onpropertychange ="file1.value=this.value"  style =display:none />    
< input  type ="text"  name ="file1"  readonly />    
< input  type ="button"  value ="浏览"  id ="button1"  name ="button1"  onclick ="file.click()" />

2. 使用脚本事件限制控件输入

      将<input type="file"/>控件的鼠标右键菜单、按键事件限制住,不让用户有机会输入。

< input  type ="file"  onkeydown ="return false"  onkeyup ="return false"  oncontextmenu ="return false" >

3. 使用contenteditable属性

      使用该属性可以有效地限制用户在<input type="file"/>控件中手动输入内容,而只能通过文件选择对话框选择文件。

< input  type ="file"  id ="file1"  contenteditable ="false"   />

 


本文转自Jaxu博客园博客,原文链接:http://www.cnblogs.com/jaxu/archive/2009/07/02/1515506.html,如需转载请自行联系原作者


相关文章
Input 标签监听内容输入(change、input 事件区别)
Input 标签监听内容输入(change、input 事件区别)
153 0
|
6月前
input file 设置文件选择类型
input file 设置文件选择类型
246 0
|
12月前
|
前端开发
input file上传文件改变默认样式
input file上传文件改变默认样式
91 0
|
JavaScript
jQuery val(); input 获取与设置默认输入内容
jQuery val(); input 获取与设置默认输入内容
68 0
input type=file过滤图片
input type=file过滤图片
59 0
|
移动开发 HTML5
修改HTML5 input placeholder 颜色及修改失效的解决办法
修改HTML5 input placeholder 颜色及修改失效的解决办法
|
JavaScript
【mpvue】radio-group 标签组设置默认选择checked: 'true',选择了单选按钮的非默认选项,再点击其他的选择,单选按钮又会变成默认的选项
1、问题举例描述: radio-group 标签组设置默认选择checked: ‘true’,选择了单选按钮的非默认选项(场外),再点击其他的选择(手续费率),单选按钮又会变成默认的选项(场内) 默认状态如下:
516 0
【mpvue】radio-group 标签组设置默认选择checked: 'true',选择了单选按钮的非默认选项,再点击其他的选择,单选按钮又会变成默认的选项
|
前端开发
前端:input 标签取消账号填充
前端:input 标签取消账号填充
input文件选择框文件过滤参数accept
input文件选择框文件过滤参数accept
111 0
ADI
|
JavaScript 前端开发 API
[记录] input[type=file]属性详解
[记录] input[type=file]属性详解
ADI
321 0