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.js中的绑定样式实现，展开的内容呦style绑定样式和绑定class样式，具体相关内容需要的小伙伴可以参考下面文章介绍2022-05-05
在Vue和Django进行前后分离开发时,经常会遇到跨域和CSRF令牌验证问题,本文详细介绍了如何在Django后端设置视图获取CSRF令牌,并在Vue前端进行配置以确保安全的数据交互,文章提供了后端视图创建、settings配置以及前端axios请求封装的具体方法2024-09-09
这篇文章主要介绍了vuex入门教程，图文+实例解析，具有很好的参考价值，希望对大家有所帮助。2022-03-03
这篇文章主要介绍了vue中表格设置某列样式、不显示表头问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了三种使用icon的方案，分别是element-icon、svg-icon、@iconify/vue，三种方案通过代码示例介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了vue非组件如何实现列表的无缝滚动效果,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下2023-09-09
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
下面小编就为大家分享一篇vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家详细介绍了vue-dialog的弹出层组件，可以通过npm引用的组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
今天小编就为大家分享一篇关于vue中$nextTick的用法讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了vue.js 2.*项目环境搭建、运行、打包发布的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
最新评论