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 type=file 标签禁止让用户手动输入相关推荐

手机浏览器input type=file标签调用手机拍照+分片上传
闲话不多说,开发背景也不是大家关心的话题.就直接说实现如题功能首先,你的手机要支持html5吧(现在应该都支持吧) 然后,html代码只要一句<input>就够了 <input t ...
ashx获取input file 文件_手机浏览器input type=file标签调用手机拍照+分片上传
闲话不多路能需还定有开都视这讲房哦搞有名需移洁页说,开发背景也不是大家关心的话题.就直接说实现如题功朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上能首先,你的手机要支持html5吧( ...
用ajax传值input file,获取 input type=file 标签的内容,并使用ajax进行请求到服务器...
数据结构:栈顺序表方法和单链表方法(python版) #!/usr/bin/env python # -*- coding:utf-8 -*- class StackUnderflow(ValueE ...
[转载]input[type=file]在移动端各浏览器无法适配打开相机的问题。
原文地址:input[type=file]在移动端各浏览器无法适配打开相机的问题.作者:韩小文近期有一需求是拍照上传用户头像并能进行区域性的截取操作. 故使用了input[type=file]标签进 ...
android webview file,Android WebView 不支持 H5 input type=file 解决方法
最近因为赶项目进度,因此将本来要用原生控件实现的界面,自己做了H5并嵌入webview中.发现点击H5中 input type="file" 标签不能打开android资源管理器 ...
android webview使用html5input id=input type=file/ 上传相册、拍照照片
本人编程新手,这次做的功能是android webview 嵌入HTML5的页面,页面中有一个<input id="input" type="file"/ ...
input type=file 禁止让用户手动输入
1. 取代法使用隐藏的<input type="file"/>控件,然后用一个只读的文本框和一个按钮来模拟<input type="file" ...
input type=“file“属性详解，利用capture调用手机摄像头
<input> type 类型为 file 的标签,可以选择一个或多个文件,通过表单上传到服务器,也可以通过 Javascript 的 File API 对文件进行操作. 实例: < ...
用input type=file调取手机照相机以及相册选择照片上传
最近由于在写一个车贷的webapp项目,其中要求调取手机照相机以及手机相册来获取照片,而我之前一直是用cordova等打包工具调取手机硬件.于是也到网上找了下解决方案.其中h5提供的type=&quo ...

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

input type=file 标签禁止让用户手动输入相关推荐

最新文章

热门文章