首页 > 其他分享 >上传文件时禁止用户手动输入

上传文件时禁止用户手动输入

时间:2023-04-14 12:03:43浏览次数:32  
标签:控件 文件 手动 用户 选择 上传 输入


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

那么如何解决该问题呢?

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

 

 

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

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

<input type="file" οnkeydοwn="return false" οnkeyup="return false" οncοntextmenu="return false">

3. 使用contenteditable属性

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

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

标签:控件,文件,手动,用户,选择,上传,输入
From: https://blog.51cto.com/u_16070335/6189852

相关文章

  • mvc文件上传
         ......
  • C#上传大型视频文件到服务器,解决方案
    ​ 前言文件上传是一个老生常谈的话题了,在文件相对比较小的情况下,可以直接把文件转化为字节流上传到服务器,但在文件比较大的情况下,用普通的方式进行上传,这可不是一个好的办法,毕竟很少有人会忍受,当文件上传到一半中断后,继续上传却只能重头开始上传,这种让人不爽的体验。那有没有......
  • VMWare Horizon Linux 手动场 cannot open display 错误
    环境:系统:rhel7.9horizonagent版本:2209桌面:Gnome问题描述:防火墙已关闭的情况下,在使用LSF交互式任务时不能打开带界面的程序(xhost+已经事先执行过)。解决问题:vim/usr/lib/vmware/viewagent/bin/StartXServer.sh找到xdmcp_opt="-query127.0.0.1-once"改为xdmcp_opt......
  • GridControl手动添加控件
    1、效果privateRepositoryItemButtonEditCreateRepositoryItemButtonEdit(Dictionary<object,string>dicButtons){RepositoryItemButtonEditrepositoryBtn=newRepositoryItemButtonEdit();repositoryBtn.AppearanceDisable......
  • 一统天下 flutter - 输入: Draggable/DragTarget - 拖拽
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-输入:Draggable/DragTarget-拖拽示例如下:lib\input\drag.dart/**Draggable/DragTarget-拖拽**Draggable-按下后可拖拽的对象*LongPressDraggable-长按后可......
  • 原生JS修改输入框value,并触发前端框架改变内部管理的响应式数据
    背景有时候,我们需要在一个网站上重复地执行某些操作,例如:输入>查询>输入>查询······这时候,我们可以写一个js自动化脚本执行这些操作,来保护我们的手指关节,以及键盘鼠标。对于大多数网站来说,使用web框架如vue进行开发,这些框架使用内部的响应式系统来管理数据,针对input元素,v......
  • 九宫格输入法
    假设有九宫格输入法键盘布局如下:[1,.?!][2ABC][3DEF][4GHI][5JKL][6MNO][7PQRS][8TUV][9WXYZ][0空]注意:中括号[]仅为了表示键盘的分隔,不是输入字符。每个中括号中,位于首位的数字字符即是键盘的按键,按一下即可输入该数字字符。......
  • CKEditor粘贴图片自动上传到服务器(C#版)
    ​ 百度ueditor新增的将word内容导入到富文本编辑框的功能怎么没有啊,...ueditor实现word文档的导入和下载功能的方法:1、UEditor没有提供word的导入功能,只能说是粘贴复制。2、方案:用poi来提供word导入,思路是将word转换为html输出,再用UEditor提供的setContent()方法将html的内容......
  • Spring Boot实现分片上传、断点续传、大文件极速秒传-备忘
    文件上传是一个老生常谈的话题了,在文件相对比较小的情况下,可以直接把文件转化为字节流上传到服务器,但在文件比较大的情况下,用普通的方式进行上传,这可不是一个好的办法,毕竟很少有人会忍受,当文件上传到一半中断后,继续上传却只能重头开始上传,这种让人不爽的体验。那有没有比较好......
  • input number 数字输入限制
    转自:https://blog.csdn.net/qq_43535970/article/details/127516919inputnumber数字输入限制,最大值最小值输入范围限制前言有时候我们会有一些需求限制输入数字的大小,比如一个24小时数字输入框,7天数字输入框等等,这个时候我们就需要单独进行处理了。解决方案我看了看网上,解决方......