input 标签类型为file时, 取消文件选择的判断

最新推荐文章于 2024-05-27 17:30:30 发布
最新推荐文章于 2024-05-27 17:30:30 发布
阅读量943 收藏
点赞数
文章标签： java python vue jquery web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35516360/article/details/122064810
版权

原文链接: input 标签类型为file时, 取消文件选择的判断

上一篇: vue cli 为已有项目添加PWA和打包分析, 去除core-js

下一篇: 图片 转 ico

选择文件直接使用change事件即可, 但是取消选择有点麻烦...

下面的方法有一定的误差和风险....

打开文件选择窗口后取消, 这个没有回调, 而且页面也不太好感知

up-26f9cf6f301c0822f29ec53a90745f1016d.png

监听input事件, 可以看到有四个事件

点击时触发focus, 弹出窗口选择文件触发blur

点击取消浏览器会重新聚焦, 触发focus, 此时点击空白或者其他地方会触发blur

up-09437ec556b4e07490a02bb514a6d132409.png

选择文件时, 可以看到change事件是在第二个focus之后触发的, 而且拿不到文件

up-98cd9de78ab120c21e1936eb6bd7f01edf4.png

不过由于这两个之间的间隔很短, 所以可以采用鼠标双击判断的方式, 第二个focus后300ms内如果没有接收到change事件, 则表示没有选择文件

不过这么做也有点问题,  要是选择一些大文件的话, 或者数目很多的情况下, 会不会被误认为是没有选择文件呢?
试着传了100个文件, 基本上还是300ms以内的, 不行就增大阈值判断, 至少change事件是一定能够监听成功的, 只是取消的事件有很小的的概率监听不到而已, 这样主要也是为了释放promise, 即使监听不到也问题不大

不过由于使用了focus事件, 这个方法不能够用于动态创建dom不挂载的情况, 因为无法监听focus和blur事件

阿豪boy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在vue3中对input file类型的onchange 取消选中文件
m0_57767772的博客
05-18 1126
本来在一般js中操作dom以如下方式实现： <input type="file" name="" id="f" value="" /> <script type="text/javascript"> document.getElementById("f").onchange=function(){ this.value="" } </script> 在vue3中采用 ref 获取dom元素 <input type=
Vue触发隐藏input file的方法实例详解
10-16
主要介绍了Vue触发隐藏input file的方法实例详解，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
20240527每日前端-------聊聊前端input file 文件框“取消”按钮事件
最新发布
weixin_42678822的博客
05-27 311
基于此点，我们可以监听focus事件，设置一个setTimeout ,那只要控制这个focus事件在change事件之后执行，就可以通过设置一个变量和setTimeout方法实现。但是如果，这个时候点击取消按钮，或者x关闭弹窗，原生的input标签是无法监听取消事件的。并且取消也不会触发input的change事件，这种情况下该怎么处理？浏览器页面获取焦点事件早于 onchange 事件约20毫秒。
如何检测 html 的 input file 控件在文件输入时，用户点击了“取消”
yxp 的博客
12-25 2744
在使用 input file 控件监听用户文件选择弹出框的取消动作，出现了很大困难，input file 设计为文件打开动作与 change 事件相关，因此在 change事件内对取消动作判定无效，因为 change 事件不会被激发。所以判定代码不会执行。
如何去掉input type=file中的选择文件
热门推荐
七侠剑客的博客
05-28 1万+
使用input type=file时，发现总是有个默认的选择文件，如图所示： 对其进行样式修改发现，其默认的样式就是这样，并不能通过css样式进行修改。既然修改不了，我们为什么不换另一种思路对其进行解决？这里我们通过position：absolute绝对定位对其进行解决，思路是通过一个div绝对定位，位于input上方，通过对div的点击，进而监听触发input事件，从而解决去掉选择文件（这里其...
模拟input file 文件框“取消”按钮事件
My_Soul_的博客
06-01 2443
在通过input file实现文件上传的功能时，通过为当前window添加focus事件的方式来模拟取消事件
html input监听未选取,如何去掉 input type=file 的 “未选择任何文件”标志？
weixin_32287177的博客
06-09 1224
比如有个需求,是点击一个按钮进行上传图片.屏幕快照 2018-03-19 下午1.30.18.png如何实现这个效果呢?我的做法是 给input外层 裹上一层div更换头像然后把div的样式 处理成button的一样. 那么重点来了, input的属性怎么写呢?我是这么处理的把外层div : { position: relative; }input { position: abs...
如何点击a标签实现弹出input file上传文件对话框
09-28
在示例中，我们有一个`<a>`标签用于作为点击触发器，以及一个隐藏的`<input type="file">`标签用于实际的文件选择对话框： ```html 添加图片 <input type="file" name="image" class="hidden" value="" /> ``` ...
将input file的选择的文件清空的两种解决方案
12-12
上传文件时,选择了文件后想清空文件路径，搜索了一下，用两种方法解决 代码如下: <input type=”file” id=”fileupload” name=”file” /> 第一种: 代码如下: var obj = document.getElementById(...
判断多个input type=file是否有已经选择好文件的代码
12-10
在网页表单设计中，`<input type="file">`元素用于让用户选择本地文件上传到服务器。当有多个这样的输入字段时，有时我们需要确保至少有一个输入框被用户选择了文件。这个场景常见于允许用户上传多份文件的情况。...
vue 清空input标签 中file的值操作
11-20
同时，`@change="onUpload"`监听文件选择事件，当用户选择文件时会触发`onUpload`方法。 在Vue组件的`methods`中，我们可以这样处理`onUpload`事件： ```javascript methods: { onUpload() { this.$refs....
关于 input type=file 类型的第一次上传文件后，再次打开input上传文件，没有选择文件，但还是触发了input的change事件的解决办法
weixin_44777146的博客
11-12 961
今天在公司遇到一个需求，点击一个按钮弹出一个弹出框 里面有input上传文件，第一次上传很成功，在次打开弹出框，继续input上传文件时候还没有选中文件，确触发了change事件。 因为当时用label 修改了input的样式，所以没看到第二次准备上传文件时，第一次的文件并没有清空的情况。 最后想了一个办法：在每次上传文件后清空文件。 首先在外层套一个form表单 <form id="file_form"> <label for
监听input type=file 文件上传取消事件
猿小龙
09-04 5324
<input type="file" id="files"> var batchUpload = document.querySelector('#files'); files.click(); files.addEventListener('change', function () { var filesList = document.querySe...
html input file隐藏触发,html input标签中的file，点击取消后并没有触发onchange事件...
weixin_33205735的博客
06-03 611
用户提问如这样一个标签，当我点击选择并确定的时候，会改变value的值 ，从而触发onchange事件，但让我重新选择一张图片，但在弹出对话框的时候，我又不想选了，所以我选择了取消，接下来，标签内的原地址消失了，却没有触发onchange事件，说明file框内的地址没有了，但value里肯定还是那个值，这个BUG该怎么解决，我想要他点击取消的时候同样触发onchange事件，或者点击弹窗中的取消后...
解决谷歌下input type='file'点击取消内容清空问题
牟云飞的博客
07-26 1492
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>解决谷歌下input type='file'点击取消内容清空问题 </TITLE> </HEAD> <BODY> <div i...
ajax回调函数中不能触发input[type='file']事件的解决方法
u010165837的专栏
08-07 917
今天在做文件上传遇到一个问题,在ajax回调成功后触发input[type=’file’]元素的事件时始终不能弹出文件选择对话框 ，于是开始各种问题的排除，最终我发现在ajax 异步提交不行，要同步提交才可以 ，ajax配async: false就以了。
input type 为file 时，取消上传文件后再选择相同图片不触发 change 事件
一枚不断学习的小码农一枚~
09-02 1387
标题input type 为file 时，取消上传文件后再选择相同图片不触发 change 事件 因为上传文件后 input 的 value 值就为 pic1，当取消上传或关闭弹窗再打开后，如果上传相同图片input value 值仍然为 pic1,所以不会触发 input 的 change 事件，所以我们只需要在取消或者关闭弹窗后清空 input 的值就好了 let input = document.getElementById('inputFile') input.value = ''
input file表单, 判断用户是否选中文件，监听input file 的 choose事件
业余前端的职业经历
03-18 3488
我们有的时候 还是会有这样的需求 等用户选中文件之后 触发加载框 做一些操作啥的 其实还是很简单地 监听input的change事件 判断value 是否为空 $('input').on('change', function () { if (this.value != "") { // 判断用户是否选中了文件 console.log('选中了文件') } else { console.log('用户取消了文件'); } ...
前端处理取消选择文件动作
鱼猫的博客
12-07 597
项目中用到各种选择文件，且有很大一部分操作几乎相同，想要尽可能的简化选择上传文件的步骤，因此选择脚本生成 标签的形式完成函数式的上传文件调用，但是如果打开了文件管理器但是并未选择文件而是点击了取消，此时是不会触发的的事件的，如果想要在取消选择文件后清除一些缓存变量以及回收等资源的话，仅凭当前的内容并不足以完成。解决重点在于如果得知文件管理器关闭了，在文件管理器关闭后根据判断是否有选择文件。 可以使用,当有页面内容获取焦点的时候，此时打开会导致焦点转移，当关闭时，页面内容会重新获取焦点且会触发
html中如何给input类型为file的文件赋值
06-11
如果你想要设置 input type="file" 的值，你可以通过 JavaScript 来模拟用户选择文件的行为： HTML 代码： ``` <input type="file" id="file-input"> <button onclick="setFile()">设置文件 ``` JavaScript 代码...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值