admin 管理员组

文章数量: 1087652

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" />

本文标签： input typefile 标签禁止让用户手动输入

版权声明：本文标题：input type=file 标签禁止让用户手动输入 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687333023a90611.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。