vue中input type=file上传后@change事件无效的解决方案
更新时间：2023年05月25日 10:27:40 作者：高效编程
这篇文章主要介绍了vue中input type=file上传后@change事件无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
input type=file上传后@change事件无效的解决
为什么@change事件会无效？
绑定事件无效的问题，不仅仅是Vue中才会出现的，写原生js时同样是上传完文件后将无法触发事件，简单查阅资料，似乎与上传的DOM组件相关，因项目紧急也没有深究。
怎么解决事件不触发的问题？
网上大多文章说是要移除<input type='file' id='demo'\>再通过JS动态添加，这样确实可以解决问题，vue 中也有很多文章说 通过 v-if ,我试过之后发现v-if也不生效了
借助jQuery重新添加事件,可以解决
我们在上传文件处理完成后，重新添加事件
$("#demo").on("change",function);将input 选择的文件置空（初始化）
document.getElementById("demo").value='';input的type=file触发的相关事件
今天突然用到input相关的事件，突然发现自己还没有总结过input相关事件的运行原理。而且我还竟然翻api去了解了，所以，为了记恨自己，就写了相关与input相关的事件运行的过程。
添加了一些相关的方法测试了一下。这一节首先介绍一个input的type=file的运行流程。
我们书写了mousedown，mouseup，click，input，change，focus，blur绑定到了input上面，模拟点击选择了一个文件，触发事件的流程是下面这样的：
- （1）mousedown
- （2）focus
- （3）mouseup
- （4）click
- （5）blur
- （6）focus
- （7）change
首先触发了鼠标按下事件，然后就是焦点到了input上面，然后鼠标抬起，触发click点击事件，失去焦点以后弹出了文件选择框，选中文件以后触发焦点，最后触发的change事件。
如果你没有选择文件的话，直接点击取消的话，就不会触发change事件。
所以说，如果要监听input 的type=file的内容变更事件的话，最好直接用change事件去监听。
附上案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="file" id="input">
</body>
<script>
document.getElementById("input").addEventListener("focus",function () {
console.log("focus");
});
document.getElementById("input").addEventListener("mousedown",function () {
console.log("mousedown");
});
document.getElementById("input").addEventListener("mouseup",function () {
console.log("mouseup");
});
document.getElementById("input").addEventListener("input",function () {
console.log("input");
});
document.getElementById("input").addEventListener("change",function () {
console.log("change");
});
document.getElementById("input").addEventListener("blur",function () {
console.log("blur");
});
document.getElementById("input").addEventListener("click",function () {
console.log("click");
});
</script>
</html>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了使用Vue实现移动端左滑删除效果，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了vue2基本响应式实现方式之让数组也变成响应式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue+iview+less 实现换肤功能,项目搭建用的vue—cli，css框架选择的iview，具体操作流程大家跟随脚本之家小编一起看看吧2018-08-08
本篇文章主要介绍了vue中的provide/inject的学习使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了vite+vue3中如何使用router问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
vue+element下日期组件momentjs转换赋值问题解决
这篇文章主要介绍了vue+element下日期组件momentjs转换赋值问题,记录下使用momentjs转换日期字符串赋值给element的日期组件报错问题，需要的朋友可以参考下2024-02-02
这篇文章主要介绍了Element Alert警告的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
vue+elementUI实现当渲染文本超出一定字数时显示省略号
这篇文章主要介绍了vue+elementUI实现当渲染文本超出一定字数时显示省略号,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
今天小编就为大家分享一篇Vue条件循环判断+计算属性+绑定样式v-bind的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本文主要介绍了vue实现在线预览office文件，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最新评论