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

2024年1月19日 98次阅读 来源: 元谋人111 
html:
<input type="file" id="file" />

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('') // 清空原有的数据
    })
    原文作者：元谋人111
    原文地址: https://segmentfault.com/a/1190000015759894
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞