input元素type为file类型，change事件在文件选择框出来后点击取消后事件只触发一次的问

ixlei 发布于2019-08-02 11:01 / 2714人阅读

摘要：事件问题详细描述为类型的时候，在文件选择框出来后，这时选择了文件后或是点击取消都会触发事件。期望的操作和解决在文件选择框出来之后，点击取消不执行事件里的操作获取。事件清空原有的数据

html:


js:
$("#file").change(function(){
    console.log("change事件");
    })

问题详细描述：

1.input 为file类型的时候，在文件选择框出来后，这时选择了文件后或是点击取消都会触发change事件。
2.在选择了一个文件之后，再重新选择同一个文件，这时候就不再触发change事件了。

期望的操作和解决：

1.在文件选择框出来之后，点击取消不执行change事件里的操作-->
获取$("#file").val()。判断这个是否为空，为空的话直接return;

eg:
$("#file").change(function(){
    if($("#file").val() == "")
        return;
    console.log("change事件");
    })

2.选择同一个文件之后，还能再出发change事件。-->
清空上一次触发change事件后 input的value即可。

eg：
$("#file").change(function(){
    if($("#file").val() == "")
        return;
    console.log("change事件");
        $("#file").val("") // 清空原有的数据
    })

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52709.html

input元素type为file类型，change事件在文件选择框出来后点击取消后事件只触发一次的问

摘要：事件问题详细描述为类型的时候，在文件选择框出来后，这时选择了文件后或是点击取消都会触发事件。期望的操作和解决在文件选择框出来之后，点击取消不执行事件里的操作获取。事件清空原有的数据 html: js: $(#file).change(function(){ console.log(change事件); }) 问题详细描述： 1.input 为file类型的时候，在文...

Charlie_Jade 2019-08-26 12:09 评论0 收藏0
jQuery入门笔记之（三）事件详解

摘要：可以传递三个参数表示一个或多个事件类型，比如。表示绑定到指定元素的处理函数。我们称它为简写事件。必须在中，并且使用作为事件触发元素，不然无效。和表示鼠标移入和移出的时候触发。按下返回按下返回和分别表示光标激活和丢失，事件触发时机是当前元素。转自个人博客在JavaScript 有一个非常重要的功能，就是事件驱动。如果你的网页需要与用户进行交互的话，就不可能不用到事件。它在页面完全加...

GitCafe 2019-08-19 17:17 评论0 收藏0
浏览器常用事件解析

摘要：之前写过一篇浏览器事件的相关操作和事件运行的原理浏览器事件解析。注意，页面从浏览器缓存加载，并不会触发事件。事件有一个属性，返回一个布尔值。此外，不支持事件，可以使用事件代替。之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件及一些可能的坑。表单事件键盘事件当 , 的值发生变化时触发。此外，打开 contente...

zhoutk 2019-08-02 16:04 评论0 收藏0
浏览器常用事件解析

摘要：之前写过一篇浏览器事件的相关操作和事件运行的原理浏览器事件解析。注意，页面从浏览器缓存加载，并不会触发事件。事件有一个属性，返回一个布尔值。此外，不支持事件，可以使用事件代替。之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件及一些可能的坑。表单事件键盘事件当 , 的值发生变化时触发。此外，打开 contente...

Richard_Gao 2019-08-23 11:52 评论0 收藏0