网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网站建设 >> Javascript >> 正文
最新文章
· Jquery插件原来就这么简单
· 21个值得收藏的Javascript技巧
· JavaScript中的原型和继承
· JS对select动态添加options操作
· js获取表单值的两种方法
· 关闭网页弹出加入收藏,刷新不弹出加
· 如何判断是关闭还是刷新网页
· 命名JavaSript函数名时注意
· javascript中的setAttribute()浏览器
· JS实现IE6下PNG图片透明且链接正常的
热门文章
 JS实现两个页面传值
 实现对文字自动排版的网页特效
 JS获取指定ID标签之间的内容
 JS实现IE6下PNG图片透明且链接正常
 JS计数器
 通过js改变页面中元素的内容
 js切换文本框的只读与可写的动态切
 JS实现cookie的添加、获取、删除
 js在线编辑器常用函数大全
 javascript中的setAttribute()浏览
相关文章
没有相关文章
上传文件时禁止用户手动输入
来源:JavaEye 更新时间:2010/9/27 7:34:04 阅读次数:
字体:[ ] 我要投稿

常规的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" />

  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号